Мультимедіа на веб-сторінках тривалий час завдавало значних труднощів веб-розробникам через різноманіття форматів та їх некоректну підтримку браузерами. Із появою стандарту HTML5 ці труднощі дещо зменшились, оскільки запропоновано кілька стандартних універсальних тегів для додавання мультимедійних об'єктів.

Це теги audio та video. 

Вони мають таку структуру: 

<video width="400" controls> 
<source src="mov_bbb.mp4" type="video/mp4"> 
<source src="mov_bbb.ogg" type="video/ogg"> 
 Ваш браузер не підтримує теги відео HTML5. </video>

Такий тег додає на сторінку відео-програвач, шириною 400 пікселів, з елементами керування (кнопки play, pause та volume). Можна також задати атрибут autoplay для того, щоб відтворення відео розпочиналось автоматично.

Варто зауважити, що у тезі вказано кілька файлів для відтворення - спочатку mov_bbb.mp4 , а тоді mov_bbb.ogg. Браузер спробує відтворити перший вказаний файл, і у випадку невдачі (наприклад, через відсутність кодеків), відтворюватиметься другий і т.д. Якщо ж засобів відтворення мультимедіа поданих типів не знайдеться, на місці відео-плеєра буде текст, наведений перед закриваючим тегом </video>.

Аналогічно працює тег для звуку:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не підтримує теги аудіо-елементів.</audio>


Існують також теги для додавання на сторінку інших об'єктів.

Так, тег object  можна використовувати для додавання флеш-роликів, інших веб-сторінок чи зображень.

<object width="400" height="50" data="bookmark.swf"> </object>
<object width="100%" height="500px" data="snippet.html"> </object>
<object data="audi.jpg"></object>


Тег embed використовується з аналогічною метою.

<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpg">


Наприклад, відео-ролик з YouTube можна додати на сторінку одним із наведених способів:

<iframe width="420" height="315" src="https://youtu.be/JLHGDw_gx3c"> </iframe>

<object width="420" height="315" data="
"> </object>

<embed width="420" height="315" src="https://youtu.be/JLHGDw_gx3c">

Зверніть увагу, що різні браузери можуть відображати різні теги, зокрема мультимедійні, по-різному, тож остаточний результат необхідно тестувати у різних браузерах та передбачати відображення відповідних замінників при потребі.

Остання зміна: Неділя 4 жовтня 2020 14:48 PM