Вход Регистрация
ruen

Как встроить видео на страницу при помощи 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-типы для видео:

  • 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 стало возможным делать видеоплееры высоко функциональными, удобными и в то же время простыми.

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

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

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

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.