Описание тега html5-video

Описание тега Вопросы с тегом
Видео HTML5 - это элемент, введенный в черновик спецификации HTML5 с целью создания совместимого со стандартами способа воспроизведения видео и фильмов без плагинов, частично заменяющего элемент объекта.

Видео HTML5 - это элемент, введенный в черновик спецификации HTML5 с целью создания совместимого со стандартами способа воспроизведения видео и фильмов без плагинов, частично заменяющего элемент объекта.

Основное использование

Вы можете встроить video в документ HTML5, используя следующий код:

<video width="320" height="240" controls="controls">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.webm" type="video/webm">
   <p>Your browser does not support the video tag.</p>
</video>

Атрибуты

В video Элемент имеет следующие специфические атрибуты:

  • src дает адрес медиаресурса для показа
  • crossoriginэто атрибут настроек CORS
  • posterдает адрес файла изображения, который пользовательский агент может показать, пока нет видеоданных
  • preload задает поведение предварительной нагрузки, допустимые значения none, metadata а также auto
  • autoplayявляется логическим атрибутом. Когда он присутствует, пользовательский агент автоматически начнет воспроизведение видео, как только сможет это сделать, не останавливая
  • mediagroupможет использоваться для связывания нескольких медиа-элементов вместе путем неявного создания MediaController
  • loop является логическим атрибутом, который, если указан, указывает, что элемент мультимедиа должен вернуться к началу мультимедийного ресурса по достижении конца
  • muted является логическим атрибутом, который управляет состоянием по умолчанию аудиовыхода медиаресурса, потенциально перекрывая пользовательские настройки
  • controls является логическим атрибутом, который, если присутствует, указывает, что автор не предоставил скрипт-контроллер и хотел бы, чтобы пользовательский агент предоставил свой собственный набор элементов управления
  • width & height указать размеры элемента в пикселях

JavaScript API и события

HTML5 video элементом можно легко управлять из JavaScript.

Например, вы можете легко приостановить и воспроизвести видео, выполнив следующие действия:

document.getElementsByTagName('video')[0].play();
document.getElementsByTagName('video')[0].pause();

Также он имеет свойства:

var time = document.getElementsByTagName('video')[0].currentTime; //will return the current position of the playhead

И он также запускает события:

document.getElementsByTagName('video')[0].addEventListener('ended',function(){
   alert('That\'s all folks!');
},false);

Для прекрасного обзора обратитесь к демонстрационной странице W3.

Кодирование медиа

Все поставщики браузеров поддерживают разные форматы кодеков и контейнеров, поэтому вам следует кодировать свое видео более одного раза и обслуживать несколько файлов одновременно, чтобы ваш посетитель мог их просмотреть. Общий подход (на момент написания, т.е. весна 2012 г.) заключается в обслуживании следующего:

  • Сделайте одну версию, использующую WebM (VP8 + Vorbis)
  • Сделайте другую версию, которая использует базовое видео H.264 и аудио AAC "низкой сложности" в контейнере MP4.
  • Сделайте другую версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg

Имейте в виду, что это ПОСТОЯННО МЕНЯЕТСЯ, поэтому, прежде чем настраивать видео, изучите, что поддерживается в настоящее время и каковы перспективы на будущее!

Прошивка и резервное копирование

поскольку videoпо-прежнему не поддерживается во многих используемых браузерах (например, IE 7+8), поэтому рекомендуется использовать Flash Video в качестве запасного варианта. Для браузеров, которые вообще не могут воспроизводить видео, вы также можете предоставить ссылку на простую загрузку.

Это можно сделать, добавив традиционный object стилизовать Flash-контент в резервную часть video элемент:

<video controls poster="video.jpg" width="854" height="480">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <object type="application/x-shockwave-flash" data="player.swf" width="854" height="504">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="flashvars" value="file=video.mp4">
    <!--[if IE]><param name="movie" value="player.swf"><![endif]-->
    <img src="video.jpg" width="854" height="480" alt="Video">
    <p>Your browser can’t play HTML5 video. <a href="video.webm"> Download it</a> instead.</p>
  </object>
</video>

FAQ (на Stackru)

Доступные библиотеки

Существует множество библиотек JavaScript, предлагающих инструменты для обработки задач (и исправления кросс-браузерных проблем), с которыми вы столкнетесь при использовании video-элемент. Вот несколько (если вы знаете что-нибудь еще, не стесняйтесь добавлять их):

Инструменты для кодирования видео

дальнейшее чтение

Атрибуты и примечания

Этот тег-вики был скомпилирован с помощью Dive into HTML 5, https://dev.opera.com/, w3.org и MDN. Если у кого-то есть большой опыт работы с HTML5-видео и мобильными устройствами, я думаю, это будет отличным дополнением к этой вики-странице!