Видео на холсте с панорамированием - как решить проблемы с производительностью (также: HTML5, Flash или что-то еще?) - PullRequest
1 голос
/ 19 февраля 2012

Длинная версия:

У меня очень специфическая проблема.Сейчас я мультимедийный художник, работающий вместе с аниматором - мы пытаемся создать интерактивную анимацию, которую я хочу сделать доступной онлайн как веб-сайт и бесплатное приложение в App Store и Android Market.Но вот ключевая проблема, с которой я столкнулся сейчас.

Выходное видео с реальной анимацией будет огромным по разрешению - вероятно, примерно в 4 или более раз с разрешением HD, но это по причине.Идея состоит в том, чтобы позволить зрителю одновременно просматривать только часть видео - как при панорамировании в Google Maps или любом другом холстоподобном представлении (например, MMORPG или стратегических компьютерных играх).Таким образом, вы видите только часть целого изображения за один раз, а затем можете перемещаться, чтобы увидеть, что находится «за углом».

Таким образом, анимация будет похожа на холст Google Maps (панорамирование и, возможно, масштабирование, если для этого достаточно времени ), но с видео вместо изображений.

Большая проблема, которая возникает, - это производительность.Я думал, что лучший способ заставить его работать - это соответственно уменьшать видео для разных устройств.Но даже сейчас, если рассмотреть только настольные компьютеры - уменьшение до 720p для экрана HD означает, что разрешение в 4 раза превышает 720p, что, вероятно, слишком много для декодирования обычным компьютером (Full HD довольно часто уже проблематичен)- и выходное разрешение будет больше, чем стандарт 4K (5120 на 2880, тогда как 4K - 4096x2160).В любом случае, это неприемлемо.

Но я пришел к выводу, что в действительности нет никакого смысла в декодировании и рендеринге частей видео, которые в любом случае невидимы для пользователя (зачем тратить на это время CPU + GPU)- поскольку мы знаем, что только около 1/6 от всего холста будет видно в любой момент времени.Это вдохновило меня на мысль о том, что, возможно, я смогу разбить выводимое видео на блоки - что-то от 8 до 64 файлов, расположенных рядом друг с другом, как ячейки таблицы, и затем иметь таймер временного кода, воспроизводящий некоторую переменную и включающий видеоблоки по требованию.Когда пользователь перетаскивает холст на видимый элемент, он автоматически начинает воспроизведение файла с заданным временным кодом, считанным из глобальной переменной.Может быть некоторая эвристика, предвосхищающая движение пользователей и преждевременная активация невидимых блоков, чтобы устранить любую задержку, вызванную поиском в видео и началом воспроизведения.Тогда блоки, которые больше не видны, могут деактивироваться через некоторое время.

Итак, моей первой попыткой было попытаться выяснить, каков мой выбор для платформы, и я действительно вижу, что это сводится к:

  • HTML5 с JavaScript (интенсивно использующий тег <video>)
  • Adobe Flash (с помощью Flash Builder для развертывания приложений на всех различных устройствах)

ИHTML5 действительно был бы более предпочтительным.

Поэтому я провел небольшое исследование, чтобы выяснить, можно ли вообще синхронизировать более одного видео за раз в HTML5.К сожалению, это далеко от совершенства, есть два доступных «хака», которые хорошо работают с Firefox, но содержат ошибки в Webkit (видео часто не синхронизируются более чем на несколько кадров, иногда даже до половины секунды, что может бытьвполне видно, если бы это было одно видео, разбитое на блоки / сегменты).Не говоря уже о том, что я даже не пробовал его на мобильных платформах (Android / iOS).

Эти два метода / хака являются синхронизацией Рика Уолдрона, как показано здесь:

http://weblog.bocoup.com/html5-video-synchronizing-playback-of-two-videos/

И еще один, также разработанный Риком, это mediagroup.js (этот вообще не работает в Chrome): https://github.com/rwldrn/mediagroup.js

Мой тест здесь: http://jsfiddle.net/NIXin/EQbAx/10/

(Я спрятал контроллер, потому что он почему-то всегда воспроизводится раньше, чем остальные клипы)

Итак, объяснив все это, я был бы очень признателен за любые отзывы от вас, ребята, - как лучше всего решить эту проблему и на какой платформе. Достаточно ли зрел HTML5?

Короткая версия: Если я до сих пор не дал понять, что мне нужно, подумайте о видео, увеличенном на 600%, чтобы вы не могли видеть все (некоторые фрагменты за кадром), и вам нужно перемещаться, перемещая мышью (или щелкнув пальцем по мобильным устройствам), чтобы увидеть, что происходит в разных местах видео. Как я могу сделать это (обеспечить плавное воспроизведение видео) на разных платформах, сохраняя при этом высокое качество и разрешение видео?

Большое спасибо, дайте мне знать, если вам нужны какие-либо подробности или разъяснения по этому вопросу.

...