Добавление видео на страницу при помощи HTML5

13.04.2011 17:24

Тег <video> появился в HTML5, он позволяет добавлять и проигрывать видео на HTML-странице. Конечно, пока это будет работать только в некоторых браузерах: Safari 3,1 +, Firefox 3,5 +, и последние версии Оперы (и, возможно, в следующем выпуске Chrome).

html5video

"Старый" способ:

Брр, посмотрите этот ужасный код:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">

<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&amp;hl=en&amp;fs=1&amp;" />

<param name="allowfullscreen" value="true" />

<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&amp;hl=en&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true">

</embed>

</object>

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

HTML5 способ:

Хороший, чистый, минимальный код:

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

<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>

</video>  

Autoplay

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

<video src="abc.mov" autoplay>

</video>   

* Хотя автозапуск видео не нравится большинству посетителей сайтов и прежде чем добавить этот атрибут для вашего HTML 5 видео, хорошенько подумайте о необходимости автозапуска видео.

Download

Если браузер не знает, что делать с тегом video, или, если есть ошибка отображения, вы можете предложить скачать видео вместо его просмотра:

Autobuffer

Атрибут autobuffer используется, когда функция автозапуска не используется. Видео загружается в фоновом режиме, поэтому, когда пользователь запускает видео, он сможет сразу же проиграть по крайней мере некоторую часть содержания. Если оба атрибута - автозапуск и автобуферизация используются, то автобуферизация игнорируется.

Стоит отметить, что если браузер автоматически загружает видео, с или без автобуферизации, то вы ничего не можете с этим поделать. Это может вызвать долгую загрузку страницы, особенно если у вас есть много видео на вашей странице.

Poster

Используйте атрибут poster для отображения кадра видео (в формате. JPG,. PNG), в случае если видео не загружается по каким-либо причинам. Это могут быть локальные изображения или с другого веб-сайта.

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

<p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>

</video>    

Вы должны использовать этот атрибут, если вы не хотите, чтобы пользователь ничего не увидел.

Controls

Добавление этого атрибута означает, что вы можете использовать свои собственные кнопки управления: воспроизведение / пауза / и т.д. для вашего видео. Safari имеет прекрасные кнопки по умолчанию, но вы можете создать свои собственные.

Текущие проблемы

Internet Explorer

Лидер рынка браузеров Internet Explorer не поддерживает на данный момент тег video, и это приходится учитывать при его использовании. Временным решением может быть сочетание старого способа вставки видео и нового, с помощью HTML5. Но код в таком случае выглядит ужасно:

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

<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

<param value="http://www.youtube.com/demo/google_main.mp4">

<param value="true">

<param value="false">

<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">

</embed>

</object>

</video>