Лекция · 4.10

Web-бетке мультимедианы енгізу

YouTube видеосы неге бір браузерде ойнайды, ал басқасында ойнамайды? Дыбыс пен видеоны веб-бетте көрсету оңай сияқты көрінгенімен, астарында форматтар мен «кодектердің» бүкіл әлемі бар. Бұл — соңғы, IV бөлімнің қорытынды сабағы: HTML-де аудио, видео және ескі, бірақ тарихи маңызды мультимедиа тәсілдерін үйренеміз.

AUDIO тегі

Анықтама
Кодек («кодера-декодер» қысқартылуы) — деректерді сығу алгоритмі. Медиафайл — кодекпен кодталған деректер ағынын қамтитын контейнер (файл кеңейтілімі осы контейнер түрін білдіреді).

<audio src="sound1.mp3" controls></audio>

Атрибут	Қызметі
`autoplay`	Автоматты ойнатады (әдепкі — жоқ)
`controls`	Ойнату/тоқтату батырмаларын көрсетеді
`loop`	Циклдік (қайталап) ойнатады
`muted`	Дыбысты өшіріп ойнатады

Әртүрлі браузер әртүрлі форматты қолдайтындықтан, <source> элементі арқылы бірнеше нұсқа беруге болады — браузер өзіне сай форматты өзі таңдайды:

<audio>
    <source src="sound1.ogg">
    <source src="sound1.mp3">
    Sizdin brauzeriniz audiony qoldamaydy
</audio>

Есеп (оңай): фондық музыка қою

Берілді: бет ашылғанда автоматты ойналатын музыка керек.

<audio src="sound1.mp3" autoplay></audio>

VIDEO тегі

<video src="video.ogv" controls width="400" height="300"></video>

Формат	Видеокодек	Аудиокодек
.mp4	H.264	AAC
.webm	VP8	Vorbis
.ogv	Theora	Vorbis

⚠️

Ескеру: .avi форматындағы видео HTML құралдарымен ТІКЕЛЕЙ ойнатылмайды — сайтта қолдану үшін кестедегі форматтардың біріне алдын ала ауыстыру керек.

Есеп (оңай): видео орналастыру

Берілді: film1.mp4 видеосын беттің ішіне орналастыру.

<video src="film1.mp4" controls width="400" height="300">Film...</video>

OBJECT және фрейм (тарихи әдістер)

<object> тегі — браузер бастапқыда өзі түсінбейтін объектілерді (мыс. Flash-анимация) жүктеу үшін қолданылған, <param> тегтері оған бастапқы мәндер берген.

📛

Ескіру туралы: Flash технологиясы 2020 жылдан бастап негізгі браузерлерде толық қолдаудан шығарылған. Бұл материал ТАРИХИ-ОҚЫТУ мақсатында ғана сақталған.

Тағы бір тарихи әдіс — фрейм: браузер терезесін бірнеше бөлікке бөліп, әрбірінде жеке құжат көрсету.

Анықтама
Фрейм — HTML браузер терезесін бірнеше бөлікке бөлу мүмкіндігі. <frameset cols="..."> — тік бөлу, rows="..." — көлденең бөлу; әр бөлік <frame src="..."> арқылы анықталады.

Есеп (орта): терезені екі бөлікке бөлу

Берілді: терезені екі тік бөлікке (25% және қалғаны) бөліп, әрбіріне бөлек файл көрсету.

<frameset cols="25%, *">
    <frame src="panel.htm">
    <frame src="home1.htm">
</frameset>

📛

Ескіру туралы: <frameset>/<frame> HTML5-те ескірген деп танылған, қазіргі веб-дизайнда CSS Grid/Flexbox сияқты заманауи тәсілдер қолданылады.

🎯 ҰБТ байланысы

AUDIO/VIDEO атрибуттары мен ескірген тегтердің тарихи мәнін ажырата білу маңызды.

autoplay мен controls — әртүрлі қызмет: біреуі автоматты ойнатады, екіншісі басқару элементін көрсетеді.

.avi форматы HTML-де тікелей қолдау таппайды.

frameset/frame және object/Flash — ескірген, тарихи материал ретінде білу керек.

Сабақ қорытындысы

Кодек — деректерді сығу алгоритмі; медиафайл — кодекпен кодталған контейнер.
<audio> және <video> тегтері controls, autoplay, loop атрибуттарымен басқарылады.
<source> элементі бірнеше формат нұсқасын беруге мүмкіндік береді.
<object>/Flash және <frameset>/<frame> — ескірген, бүгінде CSS Grid/Flexbox қолданылады.