HTML5, Theora и все все все… (практика)

Увидел здесь достаточно много статей на счёт HTML5, Theora и video тега но по большей части они крутятся вокруг теории. Недавно на моём сайте MJV-ART.ORG — Аниме Обои я открыл раздел JV-Video который является небольшим видео хостингом аля Youtube по анимешной тематике на базе HTML5/Theora. Собственно я сейчас и хочу рассказать о тех проблемах которые у меня возникли.

Браузеры

Хоть основные браузеры вроде и поддерживают HTML5 и Theora но как правило с достаточной долей кривизны. Самый нормальный браузер пока остаётся FireFox но и у него глюков и странностей хватает и по этому начнём с него.

FireFox

• В первых версиях ветки 3.5 не воспринимал Aspect выставленный в ogg контейнере, в последних версиях 3.5 это исправили. Из-за этого разъезжалась картинка особенно при перекодировании mpg файлов.
• FireFox 3.5.* не воспринимает в тегах video/audio указание показа меню управления через controls=«controls» (как написано в стандарте), необходимо использовать controls=«true». В ветке 3.6 это уже исправили.
• FireFox 3.5.* отказывался воспроизводить немного «не верные» файлы у которых было "[theora @ 0xac90c0]Missing extradata!". В 3.6 эту проблему решили.
• В некоторых видео совершенно странным образом отсутствует звук. Это есть как в 3.5 так и в 3.6.
• Часто звук запаздывает и аудио/видео идут порознь. Причём часто такой рассинхрон доходит до 20 секунд, иногда сразу, а иногда в середине трека.
• Только в версии 3.6 появилась возможность смотреть на полном экране. До этого надо использовать хак на JS (код very simple и тупой):
  document.getElementById('video_post').style.position='absolute';
document.getElementById('video_post').style.left=0;
document.getElementById('video_post').width=window.innerWidth;
return false;

  

Chrome

Скажу сразу, в Chrome3 под Windows всё отлично, во всяком случаи мы проблем не нашли но и тестировали не так сильно. Все основные претензии это к Chromium из 4 ветки который сейчас есть для всех основных ОС.

• Самая главная проблема Хромиума 4 и 5 (Linux) это то, что не работает меню управления (controls) с ним видео залипает на середине и входит в бесконечный loop. Если кого интересует то вот этот баг: code.google.com/p/chromium/issues/detail?id=26036. Вполне возможно в Windows или MacOSX версиях этого бага нету. У себя на сайте я определяю 4 версию хрома и отключаю controls, а вместо них вставляю следующий код:
  document.getElementById('video_post').play();return false; Для Play.
  document.getElementById('video_post').pause();return false; Для Pause.
  document.getElementById('video_post').controls='true';return false; Для включения contorls.
  Эти кусочки можно вставлять в onlick у a,img и прочих тегов. Применение таких «кусочков» даёт возможность смотреть видео с минимальным управлением и проверять controls при очередной синхронизацией с SVN.
  
• Иногда видео полностью не работает или работает только звук.
• Полно экранного режима нет, надо так же использовать JS код, что я привёл выше.
• Нету билинейной или аналогичной фильтрации при resize из-за этого видны pixels.

Safari

Theora включается только после того как установишь плагин к QuickTime но после этого всё работает идеально, это самый без проблемный браузер хотя Theora в него не встроена. Fullscreen нету и как обычно помогает JS.

Opera

Все стабильные версии на проч не видят тег video, а вот до альфа версия 0.50_pre6177 (linux) уже проигрывает видео но со своими проблемами:

• Не работает ползунок в controls. Play и Pause работают.
• Видео периодически дёргается как будто подтормаживает (при этом процессор не нагружен) очень похоже, что они не используют double buffer.

QtWebkit

Браузеры на базе QtWebkit, могут худо бедно играть аудио (без видео) если в Phonone под Linux включен Gstreamer, c Xine всё достаточно плохо.

GtkWebkit

Не проверяли, если кто сможет то поделитесь! Очень интересно.

Кодирование

Я особо далеко не ходил и использовал ffmpeg2theora. После достаточно долгих экспериментов мы нашли наиболее подходящие параметры кодирования которые выдавали качество не хуже youtube: ffmpeg2theora --speedlevel 0 --optimize -S 0 -v 6 -a 3 -x 480 -H 44100.
Для целей кодирования можно было бы ещё использовать Gstreamer но такие эксперименты я планирую выполнить в будущем.
Так вот какие были с этим проблемы:

• В версиях до 0.25 частенько не верно выдирался Aspect (точнее просто игнорировался) и эта проблема существует независимо от проблем с Aspect у FireFox.
• MP4! Толи контейнер совершенно дурацкий то ли программы которые его делают дурацкие. Но в итоге в .mp4 записан для видео один FPS (который честно и берёт ffmpeg2theora), а в самом видео потоке используется другой. Из-за этого происходит рассинхрон видео/audio. Лечить такие видео помогает (но не всегда!) разбор на составные части .mp4 и повторная сборка при помощи стандартных для Linux утилит. Такой плеер как mplayer первые секунды проигрывания «битого» mp4 файла использует информацию из mp4 но потом быстро синхронизируется уже по информации из видео потока.
• Грузить сервер ещё кодированием в Theora я не хотел и по этому создал очень простую систему распределенного кодирования. Создаётся папка на сервере со структурой каталогов (pre_buf, pre, proc, err, out) и монтируется по NFS теми компьютерами которые должны кодировать видео. Когда происходит заливка видео на сервер то она производиться в отдельную папку в pre_buf после окончательной заливки, одним махом переноситься в pre. На обрабатывающих машинах стоит скрипт работающий по «крону» который находит первую папку в папке pre и переносит (если получится и он не опоздал) в папку proc после чего начинается обработка. Результат кладётся в папку out или err (для ошибок). На сервере так же по «крону» просматриваются папки out, err и на этой основе правиться БД и из out передаются папки уже в их публичное место. Таким образом есть возможность легко разгрузить основной сервер.

Веб сервер.

Как оказалось не каждая связка позволяет нормально предоставлять видео для просмотра. Сначала я использовал lighttpd-scgi-python/Pylons и видео практически не игралось (были рывки, артефакты и прочее) в итоге я вынес все статические файлы в отдельный домен и реализовал доступ уже напрямую через lighttpd. Вот с Lighttpd (который так же использует Youtube) напрямую всё получилось как надо. Кроме того ещё есть вероятность, что ogv,oga,ogg нету в mime-types у lighttpd — тогда их надо туда добавить.

Вроде ничего не забыл :) и я надеюсь эта статья поможет сориентироваться в текущих проблемах HTML5-video/Theora.