Веб-разработка, логотип Websash

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

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

html5-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-типы для видео:

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

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

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

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

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

Оставить заявку

Последние статьи

Популярные разделы