Экспериментальная реализация видео в браузере Firefox

Мало-помалу новые возможности грядущего стандарта HTML 5 получают практическую реализацию в популярных браузерах, пусть даже и экспериментальную. Совсем недавно разработчики специальной версии браузера Firefox под кодовым названием Shiretoko (www.mozilla.org/projects/shiretoko) внедрили в эту версию свободный видеокодек Ogg Theora. Теперь при помощи этой версии можно попрактиковаться с элементом <video>, который предназначен для простого внедрения видеофайлов в веб-документ. В дальнейшем обещают реализацию этого тега и в официальных версиях браузера. Как говорят в народе, готовь сани летом, поэтому уже сейчас в этой статье подробнее исследуем и общие вопросы использования видео на сайтах, и практические возможности браузера Shiretoko.

Народный тег

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

В первую очередь элемент video предназначен для организации видеовставок в содержание веб-сайта. Он подойдёт для публикации на html-страничках небольших видеороликов на пару минут. Вот в компьютерных играх такие видеовставки есть, так почему в сайтах видеовставок не должно быть? Это могут быть какие-нибудь демонстрационные уроки - приёмы дзюдо, например. Это могут быть лекции, выступления, пояснения. Видео - вообще хорошая народная замена письменному тексту: набубнил на мобильник какую-нибудь речь, выложил в Интернет - и не нужно напрягать себя проверкой правописания и пунктуации. Вот только в видеопотоке поиск и гиперссылки невозможно реализовать.

Что же касается просмотра полноценного видео через веб - полнометражные фильмы и т.д. - всё-таки, по-моему, проще давать прямую ссылку на видеофайл. А уж там пусть открывают через штатный медиаплеер.

На данный момент для публикации видеороликов используется довольно неуклюжий способ через специальный флэшплеер и закрытый запатентованный формат видео flv. Код для вставки видеофайла в страницу таким образом выглядит настолько ужасающе, что от него шарахаются даже знатоки html. А вот при помощи нового тега <video> вставка видеофайла в содержание странички станет такой же простой, как и вставка фотографии, и уже не нужно возиться с флэшплеерами. А, как известно, люди тянутся к тому, что попроще.

К тому же для видео браузер Shiretoko использует простой свободный видеокодек Ogg Theora, не усложненный всякими механизмами управления авторскими правами. А это тоже простой народ должен позитивно оценить. По правде говоря, из-за этих прав и тянется волынка с внедрением видео в стандарты веб. Некоторые компании хотели бы вместо свободного Ogg Theora видеть что-нибудь более собственническое. Но раз Theora первый кандидат в стандарты видео для веба, то следует ближе познакомиться с этим кодеком.

Теория Ogg Theora

Формат видео Ogg Theora базируется на VP3, разработанном компанией On2 Technologies, и относится к MPEG-1,-2,-4 и H.263 классу кодеков. В Интернете можно прочитать огромное количество флейма по поводу сравнения этого формата с другими видеоформатами. Да вот только в случае веб-стандартов все эти рассуждения не актуальны. Так как единственным на данный момент действующим форматом видео для веба является flv, то только с ним и можно сравнивать Ogg Theora.

Небольшие видеролики Theora, на мой субъективный взгляд, визуально практически сопоставимы и даже лучше, чем ролики flv такого же размера. Так, например, трёхминутный видеоролик вечеринки с песнопениями размером 320x240 и битрейтом 128 kb/s в формате ogv получился размером чуть более трёх мегабайт.

Для кодирования в формат Ogg Theora обычно используют кодек ffmpeg. Я же для этих целей рекомендую специальную консольную утилиту ffmpeg2theora (v2v.cc/~j/ffmpeg2theora). Это тот же самый ffmpg, только с более упрощённым форматом командной строки. Несмотря на свою простоту, данная консольная утилита может достаточно много: изменять размер картинки, вырезать из файла куски видео, задавать качество видеопотока и аудиопотока по отдельности или устанавливать битрейт этих потоков, задавать значения яркости/контраста/гаммы, подключать субтитры, манипулировать метаданными, использовать фильтры, делать обрезку картинки.

Если вы искали самый простой видеоредактор в мире, то, практически, ffmpeg2theora и есть самый простой, но при этом полнофункциональный видеоредактор. Разве что функции объединения нескольких файлов в один ещё пока нет.

Ещё одним простым народным средством для кодирования в формат Ogg Theora является медиаплеер VLC. Здесь в меню "Файл" есть специальный "мастер", предназначенный для организации сетевого вещания, а также для декодирования медиафайлов в другие форматы. Естественно, в числе этих форматов есть и Ogg Theora.

Реальное видео

Таким образом, для практических экспериментов нам потребуется текстовой редактор, ffmpeg2theora и браузер Shiretoko. Для опытов автор использовал версию Shiretoko 3.1a2.

Код вставки видео в html-страницу ненамного сложнее вставки обычной картинки:

<video
controls
src="video.ogg">
Установи Firefox
</video>

Как видите, элемент видео, в отличие от элемента картинки, требует обязательного закрывающего тега. Внутри элемента можно написать какой-нибудь текст, который будет отображаться, если данная версия браузера видео не проигрывает. И не нужно забывать атрибут controls, который обеспечит управление проигрыванием посредством кнопок "играть", "стоп", "пауза". Для крутых дизайнеров имеется поддержка параметров видео через java-script, что позволит создавать собственные элементы управления и прочие красивые дизайнерские финтифлюшки.

Забавно, но хоть Shiretoko и поддерживает тег <video>, но для звукового тега <audio> поддержки пока ещё не имеется.

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

Загрузка процессора при проигрывании видео браузером оказалась сопоставимой с загрузкой аналогичного flv-файла. Однако при этом в моей версии Shiretoko загрузка процессора оставалась даже после остановки видеоклипа. Поэтому если на странице внедрено несколько видеороликов, то загрузка процессора может быть весьма ощутимой, даже если ничего не проигрывать. Также при закрытии страницы с видеороликом звук отключался не сразу, а продолжал звучать ещё некоторое время. Надеюсь, этот баг будет исправлен в дальнейшем.

Цифры для примера: браузер при одновременном проигрывании шести видеороликов формата картинки 320х240 и битрейтом в районе 128 kb/s загружал Celeron 420 на 70-80%. При увеличении битрейта в два раза количество роликов, которые мог одновременно потянуть процессор, также пришлось уменьшить вдвое. Так что принцип "чем меньше, тем лучше" применим и к количеству роликов на странице, и к качеству этих роликов.

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

Вывод

Как бы ни был распространён сейчас способ проигрывания видео через флэшплеер и формат flv, такой способ является слишком громоздким. Решение посредством элемента video значительно упрощает работу с видео для веб и не требует от пользователя установки дополнительных плагинов. Так как, повторяюсь, оформительские возможности у видео для сайтов минимальны, то хотелось бы, чтобы в ближайших версиях Firefox этот элемент официально поддерживался. По крайней мере, сайтам, посвящённым "Линуксу", и куда не ходят владельцы IE, этого будет вполне достаточно.

Михаил АСТАПЧИК