Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Проигрыватель видео HTML5

теги: html5, видео

В последнее время мы уже не представляем свою жизнь без мобильных устройств. И всем нам хочется максимальной многозадачности и быстрой работы девайса. Но проблема воспроизведения видео и аудио на мобильных устройствах без использования Flash и Silverlight остро назревала уже давно. Поэтому на смену этим стандартам постепенно стал приходить новый - HTML5 плеер для аудио и видео. Эффектривность воспроизведения видео HTML5 связана с нативной поддержкой медиа (чтобы воспроизвести медиафайл наиболее эффективно, нужно воспроизводить его нативно, то есть должна производиться максимальная интеграция между браузером и операционной системой, а последней - с железом).

Перейдем теперь к практической части и разберемся, как добавить видео на сайт HTML.

Использование тега VIDEO

Для добавления видео на веб-страницу с помощью HTML используется тег video. Применяется он следующим образом:

<video src="video/nubex.webm" width="320" height="240" controls />

Примерно так будет выглядеть видео-плеер (в каждом браузере свой стиль):

Работа тега video

Но стоит учесть, что:

  1. Не все браузеры поддерживают тег video;
  2. Не каждый браузер поддерживает используемый видео кодек.

Если с первым пунктом проблем значительно меньше (большинство современных браузеров, всё-таки, корректно работают с указанным тегом), то на второй пункт стоит обратить пристальное внимание. Поговорим об этом вопросе несколько подробнее.

Поддержка видео кодеков HTML5 в различных браузерах

Для полноты информации стоит привести следующую таблицу:

БраузерGoogle ChromeMozilla FirefoxSafariOperaInternet Explorer
WebM Есть Есть Нет Есть Нет
H.264 Есть Нет Есть Нет Есть
ogg/theora Есть Есть Нет Есть Нет

Как вы видите, нет универсального формата, который позволил бы воспроизводить видео во всех браузерах. Данная ситуация решается следующим способом: на сервер загружается видеофайл в нескольких форматах, а затем в теге video указываются несколько кодеков. Выглядит это примерно так:

<video width="320" height="240" controls poster="nubex.jpg">
   <source src="video/nubex.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/nubex.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/nubex.webm" type='video/webm; codecs="vp8, vorbis"'>
   Ваш браузер не поддерживает тег video.
</video>

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

Атрибуты тега VIDEO

К атрибутам тега video следует отнести:

  • src - путь к видеофайлу;
  • autoplay - принудительное воспроизведение видео по окончании загрузки страницы;
  • controls - отображается панель управления видео (play, pause, volume и т.д.);
  • width/height - устанавливает ширину/высоту видеоплеера;
  • loop - указывает на повторение видео после завершения (циклическое воспроизведение);
  • poster - определяет адрес изображения, которое будет выводиться пока видео не проигрывается или недоступно;

Примечание: наиболее простой способ добавить видео на сайт - использовать сервис YouTube. В конструкторе сайтов "Нубекс" есть подробная статья о добавлении видео из YouTube: Как добавить в текст видео

Комментарии 1