Как встроить видео на страницу при помощи HTML5, тег video

23.07.18 ИТ / HTML 5689

Сделать проигрывание видео на сайте – сегодня потребность в реализации такого функционала встречается довольно часто. Раньше для этого использовался тег object и сторонние средства, различные плагины, чаще всего популярный flash-плеер. Но с развитием веб-технологий все упростилось, теперь для проигрывания видео на сайте достаточно применить один тег – video.

Посмотрим ниже, как использовать новый тег video. Также не стоит забывать, что можно применять CSS-стили для придания уникального внешнего вида плееру. Базовый код для размещения плеера такой:

<video src="file.mp4" controls></video>

Что касается атрибутов, то здесь часть из них работает также как в теге audio. Атрибут controls сообщает браузеру, что нужно показать кнопки управления плеером, src – указывает путь к файлу. Для разных браузеров следует задать разные форматы видео, так как поддержка видеокодеков у них различается. Делается это при помощи вложенного тега source. А так как некоторые браузеры все еще могут не поддерживать новый тег, то лучше применить универсальное решение, в котором будет использован тег object для старых браузеров:

<video width="300" height="200" controls>
	<source src="file.webm" type="video/webm">
	<source src="file.mp4" type="video/mp4">
	<source src="file.ogv" type="video/ogg">
	<object data="file.swf" type="application/x-shockwave-flash">
		<param name="video" value="file.swf">
	</object>
</video>

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

• AddType video/webm .webm
• AddType video/mp4 .mp4
• AddType video/ogg .ogv

Какие видео кодеки и форматы поддерживаются браузерами? Посмотрим ниже:

• WebM/VP8 - поддерживается в Chrome, Firefox4, Opera;
• MP4 – поддерживается в Windows Phone 7, Safari, IE9, iPhone, iPad, Android;
• Ogg/Vorbis - поддерживается в старых версиях браузеров Firefox и Opera.

Какие есть атрибуты у тега video? Перечислим ниже:

• autoplay - авто воспроизведение видео после загрузки страницы;
• controls - показать элементы управления;
• height - высота плеера в px или %;
• loop - циклическое воспроизведение файла;
• muted - выключение звука при воспроизведении файла;
• poster - путь к картинке, которая будет показана во время загрузки видео или пока не начать показ видео. Не обязательно, если не задано, то будет показан первый кадр видео;
• preload - предварительная загрузка видео. Возможные значения: auto, metadata, none;
• src - путь к файлу с видеоконтентом;
• width - ширина плеера в px или %.

Внутрь тега video можно вставить тег track для задания различной информации о видеофайле. Использование атрибутов тега track похоже на использование атрибутов при применении этого тега внутри тега audio.

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

Таким образом, разместить видео на страницу стало совсем просто. Благодаря новому тегу HTML5 стало возможным делать видеоплееры высоко функциональными, удобными и в то же время простыми.