Проигрыватель видео HTML5
В последнее время мы уже не представляем свою жизнь без мобильных устройств. И всем нам хочется максимальной многозадачности и быстрой работы девайса. Но проблема воспроизведения видео и аудио на мобильных устройствах без использования Flash и Silverlight остро назревала уже давно. Поэтому на смену этим стандартам постепенно стал приходить новый — HTML5 плеер для аудио и видео. Эффектривность воспроизведения видео HTML5 связана с нативной поддержкой медиа (чтобы воспроизвести медиафайл наиболее эффективно, нужно воспроизводить его нативно, то есть должна производиться максимальная интеграция между браузером и операционной системой, а последней — с железом).
Перейдем теперь к практической части и разберемся, как добавить видео на сайт HTML.
Использование тега VIDEO
Для добавления видео на веб-страницу с помощью HTML используется тег video. Применяется он следующим образом:
Примерно так будет выглядеть видео-плеер (в каждом браузере свой стиль):
Но стоит учесть, что:
- Не все браузеры поддерживают тег video;
- Не каждый браузер поддерживает используемый видео кодек.
Если с первым пунктом проблем значительно меньше (большинство современных браузеров, всё-таки, корректно работают с указанным тегом), то на второй пункт стоит обратить пристальное внимание. Поговорим об этом вопросе несколько подробнее.
Поддержка видео кодеков HTML5 в различных браузерах
Для полноты информации стоит привести следующую таблицу:
| Браузер | Google Chrome | Mozilla Firefox | Safari | Opera | Internet Explorer |
|---|---|---|---|---|---|
| WebM | Есть | Есть | Нет | Есть | Нет |
| H.264 | Есть | Нет | Есть | Нет | Есть |
| ogg/theora | Есть | Есть | Нет | Есть | Нет |
Как вы видите, нет универсального формата, который позволил бы воспроизводить видео во всех браузерах. Данная ситуация решается следующим способом: на сервер загружается видеофайл в нескольких форматах, а затем в теге video указываются несколько кодеков. Выглядит это примерно так:
Таким образом, источник видео будет подгружаться автоматически браузером при наличии подходящего кодека.
Атрибуты тега VIDEO
К атрибутам тега video следует отнести:
- src — путь к видеофайлу;
- autoplay — принудительное воспроизведение видео по окончании загрузки страницы;
- controls — отображается панель управления видео (play, pause, volume и т.д.);
- width/height — устанавливает ширину/высоту видеоплеера;
- loop — указывает на повторение видео после завершения (циклическое воспроизведение);
- poster — определяет адрес изображения, которое будет выводиться пока видео не проигрывается или недоступно;
Примечание: наиболее простой способ добавить видео на сайт — использовать сервис YouTube. В конструкторе сайтов «Нубекс» есть подробная статья о добавлении видео из YouTube: Как добавить в текст видео
Смотрите также:
- HTML5 audio
- Как сделать видео в качестве фона сайта
HTML5 Video Player
HTML5 Video Player — это программа для конвертирования видео в веб-формат HTML5. Для начала работы вам нужно загрузить видео, выбрать темы, и ваша веб-страница будет готова для загрузки на сайт.
Программа поддерживает почти все форматы видео в качестве исходного материала, и конвертирует видео в формат HTML5, который поддерживается всеми популярными браузерами. HTML5 Video Player также имеет основные операции редактирования видео, такие, как обрезание и вращение видео. Во встроенном плеере вы можете просмотреть результат перед сохранением. Также можно открыть страницу прямо в браузере. Просмотр возможен в таких браузерах, как IE, Firefox и Chrome.
В программе есть несколько скинов для вашего будущего плеера на сайте. Есть также несколько тем оформления для плеера. Программа также поддерживает браузеры для таких операционных систем, как iOS/ Android/ Windows Mobile, что делает его пригодным для оптимизации видео под просмотр на мобильных устройствах.