В этом видео мы рассмотрим как работать в своих проектах с тегом <video> языка HTML 5. Поскольку старые браузеры и IE не умеют работать с элементом <video>, мы должны приготовить Flash файл для тех, кто будет просматривать страницу через эти браузеры.
К сожалению, почти как и с элементом <audio>, Firefox и Safari/Chrome не обойдутся одним лишь форматом видео-файла. Поэтому необходимо будет создать три разных типа видео-файла.
.OGG: Этот формат осчастливит своим появлением Firefox. Можете использовать программу VLC (File -> Streaming/Export Wizard) чтобы провести конвертацию видео-файла в формат .ogg.
.MP4: Много программ позволяющие записывать видеоуроки автоматически экспортируют именно в этот формат файла; его вы можете использовать для Safari и Chrome.
.FLV/.SWF: Используем по-старинке для всех браузеров, которые не поддерживают элемент HTML 5 video.
[sourcecode language=»html»]
[/sourcecode]
Как и водится, у элемента <video> имеются некоторые атрибуты.
Controls: Отвечает за отображение кнопок play/stop.
Poster: Изображение которое будет показываться, пока подгружается видео.
AutoPlay: Автовоспроизведение по концу загрузки страницы.
Width: Ширина видео. Браузер может определить автоматически.
Height: Высота видео.
Src: Путь к видеофайлу. Лучше использовать вложенный элемент <source>.
Что надо и не надо делать работая с <video>
НАДО: создавать все три типа видео-файла чтобы осчастливить всех пользователей Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf).
НЕ НАДО: пропускать даже один из трёх форматов. Каждый браузер будет пытаться искать именно свой поддерживаемый формат видео-файла для работы с элементом <video>. Например если вы оставите Safari без своего типа файла, то несмотря на то, что у вас будет на всякий случай (всяких IE :) от автора перевода) Flash-файл, браузер отобразит пустой плеер.
НАДО: помнить, что поддержка полноэкранного воспроизведения пока не работает в Safari и Chrome. Вышедший же Firefox 3.6 умеет это делать, просто нажмите правой кнопкой мыши на видео.
НАДО: помнить, что единственная причина, по которой IE загружает Flash-файл, то, что он не умеет работать с элементом <video>. Так что, если браузер не понимает что-то, необходимо ему дать то, с чем он давно нашёл общий язык.
Источник: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/
Спасибо, полезно!