1. Видео и аудио

До HTML5 разметка видео и аудио была сложной задачей. В современном стандарте добавили новые теги для разметки медиаконтента с поддержкой различных форматов, встроенными элементами управления и т. д.

1.1. Видео

Для разметки видеоконтента используется парный тег <video>.

<video
  src="http://techslides.com/demos/sample-videos/small.webm"
  poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
  width="640"
  controls
  autoplay
  loop
  preload="auto"
></video>

Разберём атрибуты.

src - указывает адрес видеофайла
poster - адрес изображения, которое используется как постер если видео не загружено или еще не проигрывается
width и height - задают высоту и ширину, как у изображения
controls - атрибут-флаг, если присутствует, добавляются элементы управления видео
autoplay - атрибут-флаг, если присутствует, проигрывание видео начинается как только оно доступно
loop - атрибут-флаг, если присуствует, видео будет повторяться в цикле

Атрибут preload указывает режим предварительной загрузки видео. Его значение влияет на то, какая иформация будет загружена. Значение по умолчанию зависит от браузера в котором была открыта веб-страница.

none - не загружать видео заранее
metadata - загрузить служебную информацию (длительность и т. п.)
auto - заранее загружать всё видео

1.1.1. Форматы видео

Загружать лишь один формат видеофайла недостаточно, некоторые браузеры могут его не поддерживать, и пользователь не сможет посмотреть видео. Есть несколько популярных видеоформатов которые необходимо предоставить браузеру на выбор: webm, mp4 и ogg.

Для этого убираем атрибут src у тега <video> и добавляем новый тег <source> для каждого формата. В атрибуте src указываем адрес видеофайла, а в атрибуте type видеоформат. Браузер выберет из списка первый который поддерживает и загрузит его, проигнорировав остальные.

<video
  poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
  width="640"
  controls
>
  <source
    src="http://techslides.com/demos/sample-videos/small.webm"
    type="video/webm"
  />
  <source
    src="http://techslides.com/demos/sample-videos/small.mp4"
    type="video/mp4"
  />
  <source
    src="http://techslides.com/demos/sample-videos/small.ogv"
    type="video/ogg"
  />
</video>

Конвертация видео и аудио в необходимые форматы это задача создателя контента, контент-менеджера или, в крайнем случае, разработчика.

1.2. Аудио

Для разметки аудиоконтента используется парный тег <audio>. Его использование очень похоже на <video>, но можно задать меньше атрибутов.

<audio src="song.mp3" controls autoplay loop preload="auto"></audio>

Разберём атрибуты.

src - указывает адрес аудиофайла
controls - атрибут-флаг, если присутствует, добавляются элементы управления аудио
autoplay - атрибут-флаг, если присутствует, проигрывание аудио начинается как только оно доступно
loop - атрибут-флаг, если присуствует, аудио будет повторяться в цикле

Атрибут preload указывает режим предварительной загрузки аудиофайла. Его значение влияет на то, какая иформация будет загружена. Значение по умолчанию зависит от браузера в котором была открыта веб-страница.

none - не загружать аудио заранее
metadata - загрузить служебную информацию (длительность и т. п.)
auto - заранее загружать весь аудиофайл

1.2.1. Форматы аудио

С поддержкой форматов в браузере у аудио ситуация лучше. Все современные браузеры гарантированно поддерживают один из двух форматов: mp3 или ogg.

Как и в случае с видео, убираем атрибут src и используем тег <source> с атрибутами src и type.

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
</audio>

1.3. Поддержка старых браузеров

Если браузер не поддерживает HTML5 медиаконтент, нужно сказать об этом пользователю. Для этого, внутри тегов <video> или <audio>, после всех тегов <source> добавим строку текста, которую браузер отобразит если не поддерживает видео или аудио.

<video
  poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
  width="640"
  controls
>
  <source
    src="http://techslides.com/demos/sample-videos/small.webm"
    type="video/webm"
  />
  <source
    src="http://techslides.com/demos/sample-videos/small.mp4"
    type="video/mp4"
  />
  <source
    src="http://techslides.com/demos/sample-videos/small.ogv"
    type="video/ogg"
  />

  Your browser does not support the <code>video</code> element.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />

  Your browser does not support the <code>audio</code> element.
</audio>

Видео и аудио