Элемент <video> – совершенно новый в HTML5 и позволяет, вы только представьте, проигрывать фильмы на вашем сайте! Данные, которые должен содержать этот элемент, – это видео, а также сопутствующие аудиозаписи или изображения.

Конечно же, он будет работать только в нескольких браузерах: Safari 3.1+, Firefox 3.5+ и последних сборках Opera (а, ну и, потенциально, в следующем релизе Chrome) (уже работает практически везде, включая IE9).

«Старый» способ

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

<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/oHg5SJYRHAO&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/
v/oHg5SJYRHAO&hl=en&fs=1&" 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>Попробуйте открыть эту страницу в Safari 4! Или вместо этого вы можете <a href="http://www.yuotube.
com/demo/google_main.mp4">загрузить видео</a>.</p>
</video>

Autoplay

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

<video src="abc.mov" autoplay>
</video>

Но автозапуск – это плохо, правда? Youtube и подобные сайты используют autoplay для своих видео. Но, прежде чем вы примените это на вашем HTML5-сайте, хорошо подумайте, действительно ли он должен автоматически запускать видео.

Download

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

Autobuffer

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

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

Poster

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

<video width="640" height="360" src="http://youtube.com/demo/google_main.mp"
autobuffer controls poster="whale.png">
<p>Попробуйте открыть эту страницу в Safari 4! Или вместо этого вы можете <a href="http://youtube.com/
demo/google_main.mp4">загрузить видео</a>.</p>
</video>

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

Controls

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

Субтитры

Атрибута для субтитров не существует (пока – ау, HTML5-группа), но я подумал, что нужно их упомянуть. Лично мне нравится способ, которым это реализовано в JW FLV-плейере. Интересная статья на эту тему: http://blog.gingertech.net/2008/12/12/attaching-subtitles-to-html5-video/

Но в идеале, у нас будет возможность добавлять субтитры или аудио с описанием без javascript.

Текущие вопросы

Кодеки

Я не претендую на звание эксперта по видео/аудио-кодекам, но в этой области есть несколько интересных моментов, которые хорошо описаны в этой статье.

Internet Explorer

У IE нет поддержки <video>, но как для лидера на рынке браузеров, для него нужно будет что-то придумать. К счастью, на сайте HTML5 Doctor скоро будет приведено несколько подсказок и приемов для IE.

Физический файл

На данный момент тег <video> должен ссылаться на физический файл (смотрите пример в самом верху). Теперь нам нужна возможность просто импортировать, скажем, видео с YouTube, используя тег <video>, как мы это делали при помощи тега <embed>.

Когда я взялся за написание этой статьи, я хотел вернуться в 2008 и подловить на популярный тогда розыгрыш с клипом Рика Астли, но не нашел способ, как это сделать с помощью тега <video>.

Я думаю, тег <video> должен предоставить вам вот такую возможность:

<video src="http://youtube.com/v/oHg5SJYRHAO&hl=en&fs=1&" autoplay>
</video>

Правда, было бы круто?

Заключение

Я думаю, ему еще многое предстоит пройти, но у этого тега есть хороший потенциал. Вопросы касательно кодеков наверняка будут решаться и решаться еще очень долго, а пока вы можете вставлять запасные варианты в код, например, ссылки для скачивания. Вы можете использовать комбинацию элементов <video>, <object> и <embed>, но в этом случае разметка будет иметь весьма устрашающий вид:

<video width="640" height="360" src="http://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/google_main.mp4" width="640" height="360" autoplay="true"
controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Тем временем

Если вы пока не хотите использовать тег <video>, существует валидный XHTML-код для отображения видео:

<object width="460" height="265" data="http://video.com/moogaloop.swf?clip_id=5072163"
type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>
Источник:  css-live.ru