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

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

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

<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>