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

Пример кода тега

Пример добавления видеофайла при помощи тега

Результат:

Странно, Safari почему то не видит тега видео.

Автор ролика: Норвежская армия ,
Название: Garlem Shake .
Скачать файл можно c Яндекс.Диска : в формате OGG , в формате MP4 ,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег содержит в себе атрибут src=" " , чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv , то он будет проигрывать файлы с расширением .mp4

Таблица поддержки браузерами видео кодеков и форматов

Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4 , а другой с расширенеим .ogv

БРАУЗЕР/КОДЕК	h.264	ogg/vorbis	webm
Chrome 6+	да	да	да
FireFox 3.6+	нет	да	да
IE 9+	да	нет	нет
Opera 10.60+	нет	да	да
Safari 4+	да	нет	нет

У видео формата OGG/VORBIS , расширение файлов будет .ogv
У видео формата h.264 , расширение файлов будет .mp4

Атрибуты тега

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте:)) .

controls="controls" — создает панель управления видеофайлом, по умолчанию атрибут отключён.

height=" " — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=" " .

width=" " — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=" " .

loop="loop" — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

poster="адрес" — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

preload="auto/metadata/ none " — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=" " не работает, если включен атрибут autoplay=" "

src="адрес" — указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Тегом video можно управлять через CSS.

• Перевод

Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks !

Пишем код

Итак, чтобы видео появилось на вашей веб-страничке пишем следующий код:

< video >
< source src ="movie.mp4" type />
< source src ="movie.webm" type />
>

Сразу обратим внимание на тэг < source >, который позволяет включать видео разных форматов, что важно в тех случаях когда один из них не поддерживается тем или иным браузером.

Само собой есть и более простой вариант вставки видео:

< video src ="movie.webm" >

Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.

А теперь стоит сказать об еще одной важной вещи. Не забудьте выставить верный MIME type в заголовках Content-Type на вашем сервере. Иначе видео либо не будет вообще работать, либо будет работать не у всех. В случае Apache все решается добавлением следующих строк в httpd.conf:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
- url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)

И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source , для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.

Форматы видео

Видео файл в любом из видео форматов , следует воспринимать как zip-архив содержащий видео поток и аудио поток . Вот три видео формата, наиболее распространенных в сети:

• mp4 = H.264 + AAC
• .ogg/.ogv = Theora + Vorbis
• .webm = VP8 + Vorbis

(К сожалению хабр не позволяет вставить примеры с сайта оригинала, так что придется смотреть их там - прим. пер.)

На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:

< video >
< source src ="movie.webm" type ="video/webm; codecs="vp8, vorbis"" />
< source src ="movie.mp4" type ="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />
< source src ="movie.ogv" type />
Video tag not supported. Download the video < a href ="movie.webm" > here .
< video > >

Одно «НО» - если вы рассчитываете, что ваш сайт будет использоваться под айпадом, укажите видео в формате.mp4 первым, данная особенность связана с багом на самом айпаде.

И раз уж зашла речь про.mp4 следует отметить ряд пунктов. Во-первых, видеокодек h.264 не является бесплатным, так что за лицензию надо платить. Почитать об этом можно вот . Во-вторых, надо быть абсолютно точно уверенным в указанных видео и аудиокодеках, они могут отличаться от видео к видео. Наиболее распространенным можно считать «avc1.42E01E, mp4a.40.2», так что на всякий случай сверяемся .

Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.

Chrome Frame

Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин. )

Назад к Flash

Ну и никто не отменял флеш - опознаем браузер, видим ие, грузим флэш. Тем более что Adobe добавило в список проигрываемых видеоформатов формат.webm. Так что даже не придется что то думать с перекодировкой.

Шифруемся, или надо перекодировать видео

В случае если есть необходимость переконвертировать видео, то хорошей программой является Miro Converter , имеющая версии под винду и мак. В программе не так много возможностей поиграть с параметрами, но зато она позволяет конвертировать в три основных формата. А если посмотреть на нее более пристально, то можно увидеть, что это оболочка для ffmpeg и ffmpeg2theora , которые работают во всех ОС из под командной строки. Подробно об этой программе можно прочитать вот .

Плюшки

Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала )

Video + HTML

Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay . В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру - «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload , который позволяет подгружать видео фоном. В итоге получаем нечто подобное:

< video poster ="star.png" autoplay loop controls tabindex ="0" >
< source src ="movie.webm" type ="video/webm; codecs="vp8, vorbis"" />
< source src ="movie.ogv" type ="video/ogg; codecs="theora, vorbis"" />

Ну и вариант для тех, кто соблюдает стандарты:

< video poster ="star.png" autoplay ="autoplay" loop ="loop" controls ="controls" tabindex ="0" >
< source src ="movie.webm" type ="video/webm; codecs="vp8, vorbis"" />
< source src ="movie.ogv" type ="video/ogg; codecs="theora, vorbis"" />

Video + JS

Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте .

Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:

video.addEventListener("canplay" , function (e) {
this .volume = 0.4;
this .currentTime = 10;
this .play();
}, false

В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.

Video + CSS

Тут практически без комментариев - видео как элемент веб-страницы воспринимает всевозможные css штуки - начиная от border , opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.

Video + canvas

HTML5 принес в этом мир еще одну мощную вещь - canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно - ничего.

Пример совместного использования canvas и video может быть следующим - получение скриншотов из проигрываемого видео. У canvas есть метод drawImage , позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video ! А с помощью другого метода - toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:

video_dom.addEventListener("play" , function () {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext("2d" );
draw_interval = setInterval(function () {
// import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL("image/png" );
img.width = 40;
frames.appendChild(img);
}, 1500)
}, false );

Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь - WebGL .

Video + SVG

SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects . С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:

< svg id ="image" version ="1.1" xmlns ="http://www.w3.org/2000/svg" >
< defs >
< filter id ="myblur" >
< feGaussianBlur stdDeviation ="1" />



< style >
video { filter:url(#myblur); border: 2px solid red; }

Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css. Добавить метки