26.05.2013, 19:47

Видео в HTML5




Раньше для того, чтобы проиграть видео в браузере требовался плагин flash. Конструкция для вставки проигрывателя выглядела примерно так:
Код
<object width="480" height="390">
<param name="movie" value="http://www.youtube-nocookie.com/v/P2-g5oj0FWE?fs=1&hl=ru_RU&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&hl=ru_RU&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>

Полный список медиа-событий:

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

Источник/Автор: html5blog.ru

Категория: HTML, CSS, JS, JQ | Добавил: antisept (26.05.2013) Просмотров: 1519 | Рейтинг: 5.0/1
Теги: HTML5, видео, video
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]