HTML5 Video — от А до Я

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

Пишем код

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

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>>

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

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

<video src="movie.webm"></video>

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

А теперь стоит сказать об еще одной важной вещи. Не забудьте выставить верный 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

.mp4

.webm

.ogv

На момент написания статьи (август 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/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
 <video>>

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

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

IE ;)

Буря восторга пронеслась по интернету, когда вышел новый 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>

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

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

Video + JS

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

Для начала, как и любой 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" />
   </filter>
  </defs>
 </svg>
 <style>
  video { filter:url(#myblur); border: 2px solid red; }
 </style>

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

Заключение

Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете выложена уже масса примеров (1, 2, 3, 4, 5, 6)

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

Related Posts by Categories