Главная -> Статьи о HTML5 -> Видео в браузере с тегом video

Видео в браузере с тегом video

Раньше для того, чтобы проиграть видео в браузере требовался плагин flash. Конструкция для вставки проигрывателя выглядела примерно так:

<object width="480" height="390">
<param name="movie" value="http://www.youtube-nocookie.com/v/P2-g5oj0FWE?fs=1&amp;hl=ru_RU&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/P2-g5oj0FWE?fs=1&amp;hl=ru_RU&amp;rel=0" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="480" height="390"></embed>
</object>

 

С приходом HTML 5 жизнь вебмастеров должна существенно облегчиться. Теперь браузеры должны поддерживать воспроизведение видео без каких-либо плагинов, а чтобы вставить видео к себе на сайт достаточно написать следующий код:

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
</video>

 

Как видите, этот код гораздо более понятен нежели первый.

Атрибуты тега video

autoplay - если присутствует, то видео начинает проигрываться сразу же после загрузки страницы.

autobuffer - если присутствует, то видео начнет загружаться с сервера, однако не начнет проигрываться до тех пор, пока пользователь не нажмет на кнопку play.

poster - путь к картинке-заглушке. Будет отображаться с том случае, если видео не получилось загрузить по каким-либо причинам.

controls - с помощью этого атрибута Вы можете без проблем создать свои собственные кнопки управления для видеоплеера.

subtitles - этот атрибут на данный момент находится только на стадии обсуждения, но скорее всего появится в спецификации HTML 5. Как видно из названия, этот атрибут будет отвечать за субтитры в видео.

Что делать если тег не поддерживается?

В случае если тег video не известен браузеру пользователя - он игнорирует его и смотрит его содержимое. Внутри Вы можете либо предложить пользователю скачать это видео для просмотра локально, либо встроить тот же старый добрый flash плеер.

Несколько тонкостей

Надо заметить что не каждый браузер поддерживает все видео кодеки предлагаемые спецификацией HTML 5 (mpeg 4, H.264, Ogg Theora и WebM), поэтому для того чтобы сохранить кроссбраузерность, придется перекодировать видео сразу в 2-3 формата. Источник видео в таком случае можно прописать следующим образом:

<video controls loop>
  <source src='video.webm' type'video/webm; codecs="vp8, vorbis"'>
  <source src='video.ogg' type='video/ogg'>
  <source src='video.mp4' type='video/mp4'>
</video>

 

Глобальные атрибуты и события тега video

В HTML 5 глобальные атрибуты были разделены на несколько групп. Одна из них - группа мультимедиа атрибутов и событий. В нашем справочнике Вы можете найти подробное описание всех событий и атрибутов данной группы.

По просьбе наших читателей - выкладываем полный список медиа-событий:

onabort, oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting.

Заключение

В действии этот тег Вы можете увидеть по этой ссылке: http://html5blog.ru/examples/video-example.php