В последнее время мы уже не представляем свою жизнь без мобильных устройств. И всем нам хочется максимальной многозадачности и быстрой работы девайса. Но проблема воспроизведения видео и аудио на мобильных устройствах без использования Flash и Silverlight остро назревала уже давно. Поэтому на смену этим стандартам постепенно стал приходить новый - HTML5 плеер для аудио и видео. Эффектривность воспроизведения видео HTML5 связана с нативной поддержкой медиа (чтобы воспроизвести медиафайл наиболее эффективно, нужно воспроизводить его нативно, то есть должна производиться максимальная интеграция между браузером и операционной системой, а последней - с железом).
Перейдем теперь к практической части и разберемся, как добавить видео на сайт HTML.
Использование тега VIDEO
Для добавления видео на веб-страницу с помощью HTML используется тег video. Применяется он следующим образом:
<video src="video/nubex.webm" width="320" height="240" controls />Примерно так будет выглядеть видео-плеер (в каждом браузере свой стиль):
Но стоит учесть, что:
- Не все браузеры поддерживают тег video;
- Не каждый браузер поддерживает используемый видео кодек.
Если с первым пунктом проблем значительно меньше (большинство современных браузеров, всё-таки, корректно работают с указанным тегом), то на второй пункт стоит обратить пристальное внимание. Поговорим об этом вопросе несколько подробнее.
Поддержка видео кодеков HTML5 в различных браузерах
Для полноты информации стоит привести следующую таблицу:
| Браузер | Google Chrome | Mozilla Firefox | Safari | Opera | Internet 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: Как добавить в текст видео