Как встроить видео с помощью HTML5

Наконец, HTML5 — это не инопланетная технология, это последняя версия HTML. Это означает, что JavaScript и CSS будут работать с ним просто отлично. Разработчики смогут манипулировать им на стороне клиента или сервера, как с существующим исходным кодом HTML.

Видеокодеки

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

Прямо сейчас у вас есть три возможных варианта кодирования вашего видео:

1. H.264 — популярный формат, который может использовать преимущества аппаратного ускорения, поддерживаемого графическими чипами в настольных ПК и устройствах; также формат записи по умолчанию для многих новых видео и мобильных устройств на рынке; однако формат запатентован, и хотя он остается бесплатным для некоммерческого использования, он становится сложным и потенциально дорогим. Смотрите этот документ для более подробной информации. Когда дело доходит до распространения коммерческого контента. Поддерживается: IE 9, Safari 3.1 и Chrome (на данный момент)
2. 2. Ogg Theora — открытый стандарт, который не запатентован и не требует авторских отчислений. Поддерживается: Firefox 3.5, Chrome 4, Opera 10.5
3. 3. VP8 (WebM) — новый стандарт, недавно приобретенный компанией Google и выпущенный в формате с открытым исходным кодом, без лицензионных платежей (но все еще запатентованным). Поддерживается: Firefox 4.0, Chrome 6.0, Opera 10.6.

Вот диаграмма, чтобы было легче следовать:

Chrome заслуживает особого упоминания, поскольку Google фактически исключит поддержку одного из трех видеоформатов HTML5. После приобретения On2, разработчика и спонсора формата WebM, Google объявила, что будущие версии Chrome больше не будут поддерживать H.264. Вместо этого они выпустили WebM под лицензией BSD, предоставляя пользователям по всему миру бесплатную, неисключительную, бесплатную патентную лицензию. Таким образом, хотя Chrome в настоящее время является единственным браузером, поддерживающим все три формата, рынок вскоре разделится между двумя браузерами по умолчанию для ОС, Internet Explorer и Safari, поддерживающими только H.264, и всеми другими браузерами, поддерживающими все, кроме H.264.

Одно большое предостережение: с целью упрощения обсуждения здесь, это описание не углубляется во многие вариации трех основных форматов. Как только вы получаете доступ к различным возможностям в видео и аудио профилях и к различию между видео и аудио контейнерами и кодеками, все становится более сложным. Например, в то время как iPhone 4 записывает видео в формате H.264, вы не можете просто поместить его на сайт HTML5; Вы должны сначала запустить его через конвертер.

Было бы неплохо сделать всеобъемлющее заявление о том, что стандарт видео X наиболее широко поддерживается и должен быть вашим стандартным форматом для видео HTML5. К сожалению, как видно из приведенной выше таблицы, это не совсем так. Если вы включите пользовательскую установку расширений браузера, то наиболее широко поддерживаемым форматом будет Ogg Theora. Однако вы не можете предполагать, что пользователи, особенно на корпоративном рабочем месте, имеют ноу-хау или возможность устанавливать дополнительные видеокодеки или расширения браузера только для просмотра видео HTML5. Если по какой-то причине вы были вынуждены выбрать один кодек для вашего видео, какой из них вы должны выбрать? По-разному. Рассмотрим варианты:

H.264

Из трех стандартов H.264 имеет импульс, качество и признание среди профессионалов СМИ. Он также имеет поддержку огромного консорциума некоторых крупнейших компаний отрасли, включая Microsoft и Apple, через MPEG LA. И в этом заключается главная жалоба его критиков: H.264 не является бесплатным.

Для потребителей да, это бесплатно. И большинству разработчиков не придется беспокоиться о проблемах лицензирования ( пока ). Однако, это может быть не так для сайтов распространения видео. Все тонкости патентного лицензирования H.264 выходят далеко за рамки этой статьи (и это действительно сбивает с толку при загрузке ), но достаточно сказать, что у людей есть вопросы.

Для большинства разработчиков вопрос о патентах в значительной степени сводится к философскому спору между открытыми стандартами и качеством изображения. H.264 обеспечивает более высокое качество изображения и лучшую потоковую передачу, чем Ogg (см. Ниже) и VP8 ( WebM ). Он также имеет преимущество в производительности благодаря аппаратному ускорению на нескольких платформах, включая ПК и мобильные устройства.

Наконец, рассмотрим простоту производства, а не незначительную проблему. Все основные видеоредакторы, включая Final Cut, Adobe Premiere и Avid, экспортируются в формат H.264. Этого нельзя сказать об Ogg Theora или VP8. Если ваш магазин выпускает свое собственное видео, и большая его часть, исключительно с использованием H.264, вы сэкономите большую часть своего рабочего процесса.

Ogg Theora

Ogg — единственный стандарт, который действительно не обременен патентом. Тем не менее, он также, возможно, самый низкий по качеству , хотя и ненамного. Многочисленные сравнения лицом к лицу с H.264 благоприятствовали последнему. В то время как Ogg кодирует в немного более жесткий файл, он производит изображение с более низким качеством, чем H.264, и еще больше страдает от его сохраняемости.