Мультимедіа існує у багатьох різних форматах. Це може бути майже все, що ви можете почути або побачити, наприклад зображення, музика, звук, відео, записи, фільми, анімація тощо. Веб-сторінки часто містять мультимедійні елементи різних типів і форматів.
Перші веб-браузери підтримували лише текст, обмежуючись одним шрифтом одного кольору. Пізніше з’явилися браузери з підтримкою кольорів, шрифтів, зображень і мультимедіа!
Мультимедійні елементи (наприклад, аудіо чи відео) зберігаються в медіафайлах. Найпоширеніший спосіб визначити тип файлу – подивитися на розширення файлу.
Мультимедійні файли мають формати та різні розширення, наприклад: .wav, .mp3, .mp4, .mpg, .wmv і .avi.
Формати MP4, WebM і Ogg підтримуються HTML. YouTube рекомендує формат MP4.
Поширені формати відео
| Формат | Розширення файлу | Опис |
|---|---|---|
| MPEG | .mpg .mpeg | MPEG. Розроблено Moving Pictures Expert Group. Перший популярний формат відео в Інтернеті. Більше не підтримується в HTML. |
| AVI | .avi | AVI (англ. Audio Video Interleave, що буквально можна перекласти як “чергування аудіо та відео”) — мультимедійний контейнер для аудіо-відео даних. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. |
| WMV | .wmv | WMV (Windows Media Video). Розроблено Microsoft. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. |
| QuickTime | .mov | Розроблено Apple. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Добре відтворюється на комп’ютерах Apple, але не у веб-браузерах |
| RealVideo | .rm .ram | Розроблено Real Media для забезпечення потокового відео з низькою пропускною здатністю. Не відтворюється у веб-браузерах. |
| Flash | .swf .flv | Застаріла мультимедійна та програмна платформа використовувана для авторської розробки векторної графіки, анімації, ігор і насичених інтернет-застосунків (RIA), які можна переглядати, програвати чи виконувати в Adobe Flash Player. |
| Ogg | .ogg | Розроблено Xiph.Org Foundation. Підтримується HTML |
| WebM | .webm | Розроблено Mozilla, Opera, Adobe і Google. Підтримується HTML |
| MPEG-4 or MP4 | .mp4 | Розроблено Moving Pictures Expert Group. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Підтримується всіма браузерами та рекомендовано YouTube |
Поширені аудіоформати
MP3 є найкращим форматом для стиснутої записаної музики. Термін MP3 став синонімом цифрової музики. Якщо ваш веб-сайт присвячений музиці, вибором буде MP3.
| Формат | Розширення файлу | Опис |
|---|---|---|
| MIDI | .mid .midi | MIDI (цифровий інтерфейс музичних інструментів). Основний формат для всіх електронних музичних пристроїв, таких як синтезатори та звукові карти ПК. Файли MIDI містять не звук, а цифрові ноти, які можуть відтворюватися електронікою. Добре відтворюється на всіх комп’ютерах і музичному обладнанні, але не у веб-браузерах. |
| RealAudio | .rm .ram | Розроблено Real Media для потокового передавання аудіо з низькою пропускною здатністю. Не відтворюється у веб-браузерах. |
| WMA | .wma | WMA (Windows Media Audio). Розроблено Microsoft. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах |
| AAC | .aac | AAC (Advanced Audio Coding). Розроблено Apple як стандартний формат для iTunes. Добре відтворюється на комп’ютерах Apple, але не у веб-браузерах. |
| WAV | .wav | Розроблено IBM і Microsoft. Добре відтворюється в операційних системах Windows, Macintosh і Linux. Підтримується HTML |
| Ogg | .ogg | Розроблено Xiph.Org Foundation. Підтримується HTML |
| MP3 | .mp3 | Файли MP3 насправді є звуковою частиною файлів MPEG. MP3 є найпопулярнішим форматом для музичних плеєрів. Поєднує гарне стиснення (невеликі файли) з високою якістю. Підтримується всіма браузерами. |
| MP4 | .mp4 | MP4 — це формат відео, але його також можна використовувати для аудіо. Підтримується всіма браузерами |
HTML тег <video> добавляє, відтворює та керує відеороликом на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений елемент <source>.
В даний час існує три формати відео, що підтимуються елементом <video>: MP4, WebM та Ogg.
Приклад:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не підтримує тег video. </video>
Атрибут controls додає елементи керування відео, як-от відтворення, пауза та гучність.
Рекомендується завжди включати атрибути width та height. Якщо висоту та ширину не встановлено, сторінка може мерехтіти під час завантаження відео.
Елемент <source> дозволяє вказати альтернативні відеофайли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.
Текст між тегами <video> і </video> відображатиметься лише в браузерах, які не підтримують елемент <video>.
HTML тег <audio> відтворює аудіозапис і керує ним на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег <source>.
Приклад:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Ваш браузер не підтримує тег video. </audio>
Атрибут controls додає елементи керування звуком, як-от відтворення, пауза та гучність.
Елемент <source> дозволяє вказати альтернативні аудіофайли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.
Текст між тегами <audio> і </audio> відображатиметься лише в браузерах, які не підтримують елемент <audio>.
Плагіни були розроблені для використання в різних цілях:
Елементи керування ActiveX більше не підтримуються жодним браузером.
У сучасних браузерах також відключено підтримку Shockwave Flash.
Елемент <object> підтримується всіма браузерами. Він визначає вбудований об'єкт у документ HTML.
Його розроблено для вбудовування плагінів (наприклад, Java-аплетів, програм читання PDF та Flash Player) у веб-сторінки, але також можна використовувати для включення HTML чи зображень у HTML:
<object width="100%" height="500px" data="snippet.html"></object> <object data="audi.jpeg"></object>
Елемент <embed> підтримується в усіх основних браузерах. Елемент <embed> також як і <object> визначає вбудований об'єкт у документ HTML.
Веб-браузери вже давно підтримують цей елемент. Однак він не був частиною специфікації HTML до HTML5.
Приклад:
<embed width="100%" height="500px" src="snippet.html">
Перетворення відео в різні формати може бути складним і трудомістким. Простіше рішення — дозволити YouTube відтворювати відео на вашій веб-сторінці.
YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY), коли ви збережете (або відтворите) відео. Ви можете використовувати цей ідентифікатор і посилатися на своє відео в коді HTML.
Щоб відтворити відео на веб-сторінці, виконайте такі дії:
<iframe> на своїй веб-сторінціsrc вказує на URL-адресу відеоПриклад:
<iframe width="420" height="315" src="https://www.youtube.com/embed/PTHhUE_P3YA"></iframe>