Мультимедиа в HTML
Мультимедиа — это то, что можно услышать или увидеть (звук, музыка, изображения, записи, видео, фильмы, анимация и т.д.). Данные бывают в разных форматах. На веб-страницах можно сочетать элементы разных типов.
Теги мультимедиа
В HTML для мультимедиа используются, в частности:
<audio>— аудио,<video>— видео,<embed>— встраивание,<object>— встраивание объектов,<iframe>— другие страницы.
Базовый пример с controls и <source>:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Форматы файлов
Тип файла часто виден по расширению: .mp3, .mp4, .mpg, .swf, .wav, .wmv, .avi и др.
Аудио
| Формат | Файл | Описание |
|---|---|---|
| MIDI | .mid .midi | Цифровые ноты для устройств; в браузерах не «как файл», для MIDI часто Web Audio API. |
| RealAudio | .rm .ram | Стриминг с низкой полосой; в браузерах не проигрывается. |
| WMA | .wma | Microsoft; плееры Windows, в вебе ограниченно. |
| AAC | .aac | Apple/iTunes; сырой AAC с ограниченной поддержкой, в контейнере MP4 широко. |
| WAV | .wav | IBM/Microsoft; хорошая поддержка в HTML5. |
| Ogg | .ogg | Xiph.Org; HTML5. |
| MP3 | .mp3 | Популярен; поддержка во всех браузерах. |
| MP4 | .mp4 | Часто видео, но и аудио; широкая поддержка. |
TIP
В HTML5 нативно поддерживаются MP3, AAC (в MP4), WAV и Ogg.
Видео
| Формат | Файл | Описание |
|---|---|---|
| MPEG | .mpg .mpeg | Ранний веб-формат; в HTML5 не стандарт. |
| AVI | .avi | Microsoft; не в браузере. |
| WMV | .wmv | Microsoft; не в браузере. |
| QuickTime | .mov | Apple; не в браузере. |
| RealVideo | .rm .ram | Стриминг; в браузере не играет. |
| Flash | .swf .flv | Устарело; плеер удалён из браузеров в 2020. |
| Ogg Theora | .ogg | Xiph; HTML5. |
| WebM | .webm | Mozilla, Opera, Google и др.; HTML5. |
| MP4 | .mp4 | MPEG; рекомендует YouTube; HTML5. |
TIP
В HTML5 для видео ориентируйтесь на WebM, MP4 и Ogg.
Поддержка в браузерах
Современные браузеры воспроизводят аудио и видео нативно; набор кодеков может различаться, но плагины больше не требуются.
Practice
Какие типы файлов относит к мультимедиа HTML?