H.264 / FLV лучшие практики для HTML

Question

Я бег сайта, который имеет в составе нее около 700 справочных видео (И нет, это не порно - получить свой ум из водосточного желоба :-)).

Видео в настоящее время в формате FLV. Мы используем JWPlayer для рендеринга этих видео. IIS6 размещен. Все работает просто отлично.

Насколько я понимаю, H.264 (не FLV и, вероятно, не OGG) является новым предпочтительным стандартом видео HTML5. Сегодня iPad действительно уважает только H.264 или YouTube. Предположительно, скоро многие более важные браузеры последуют примеру Apple и будут уважать только тег HTML5.

ОК, так что я думаю, что могу выяснить, как преобразовать мои существующие видео в правильный формат H.264. Доступны различные инструменты, в том числе ffmpeg.exe. Я еще не пробовал, но я не думаю, что это будет проблемой после того, как мы поиграем с настройками кодека.

Мой вопрос больше о самом контейнере, то есть о планировании плавного перехода для всех пользователей. Какова наилучшая рекомендация для рендеринга этих видео? Если я просто использую тег HTML5, то, вероятно, любой браузер, который еще не поддерживает HTML5, не увидит видео. И если я воспроизведу их в формате Flash через JWPlayer или другой проигрыватель, они не будут воспроизводиться на iPad. Должен ли я сделать некрасивое обнаружение UserAgent здесь, чтобы выяснить, что визуализировать?

Я знаю, что JWPlayer поддерживает мультимедиа H.264, но не является ли сам проигрыватель компонентом Flash и, следовательно, не воспроизводится на iPad? Извините, если мне неясно, но я ломаю голову над изящным планом перехода, который будет работать для текущих браузеров, iPad и предстоящей волны HTML5. Я не эксперт в области видео, поэтому любой совет будет очень кстати, спасибо.

Answer 1

Имейте в виду, что Firefox не поддерживает H.264 с тегом Video, поэтому, если вы хотите получить изящный запасной вариант, вы должны визуализировать свой тег видео, как показано ниже, и иметь версию OGG для видео.

       <video controls id="video" width="320" height="240" preload autobuffer >
            <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" />
            <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" />
            <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT-->
            <object width="320" height="240">
            <param name="movie" value="myplayer.swf">
            <embed src="myplayer.swf" width="550" height="400">
            </embed>
            </object>
             <!---->
        </video>

Answer 2

Я не уверен, является ли это ответом или просто комментарием, но мне действительно нужно оспорить одно из предположений первоначального вопроса: «Предположительно, скоро многие более важные браузеры последуют примеру Apple и будут уважать только HTML5 тег ".

Это просто не подтверждается ничем, что я вижу.

1. Все настольные браузеры поддерживают плагины, включая Flash. Большинство смартфонов / планшетов не Apple поддерживают Flash, поддерживают дополнительные плагины или поддерживают альтернативные браузеры.
2. Все браузеры, даже iPhone OS, поддерживают тег объекта и, по крайней мере, пытаются что-то с ним сделать. Они даже поддерживают такие вещи, как маркировка и теги шрифтов! Тег объекта будет существовать еще очень долго, и, насколько я знаю, даже является частью HTML5.
3. Firefox, вероятно, браузер № 2 после различных версий IE, в настоящее время не поддерживает H.264.
4. Microsoft ясно дала понять, что им не нравится Flash, и они предпочли бы, чтобы люди использовали Silverlight, подтверждая мое мнение о том, что тег объекта должен остаться. Они смутно взяли на себя обязательство поддерживать нативные теги видео HTML5 только в IE9. Тем временем они поставляют плагин Flash как часть ОС на Vista и Win7.

В любом случае, чтобы понять суть вопроса: «Мой вопрос больше о самом контейнере, то есть о планировании плавного перехода для всех пользователей. Какова наилучшая рекомендация для рендеринга этих видео»

HTML5-тег видео поддерживает именование нескольких источников, поэтому вы можете поместить собственное видео H.264 в качестве «основного» и Flash-плеер в качестве «запасного», который будет использоваться, если браузер не поддерживает прямую H .264 видеопоток.

<video>
<source src="../videos/primary.mp4" type="video/mp4" />
<object>
    <param name="movie" value="fallbackplayer.swf">
    <embed src="../videos/fallbackplayer.swf">
    </embed>
</object>
</video>

Answer 3

Предлагаем вам прочитать видео для всех для хорошей кросс-браузерной реализации. Вы также можете использовать запасной вариант H.264 для Flash, но, как говорит Лахлан, для полной кросс-браузерной совместимости вам также следует рендерить с Ogg.

Answer 4

Непосредственно не отвечает на ваш вопрос, но doom9.org содержит множество великолепных руководств по конвертации / обработке видео. может быть полезно для вас

Answer 5

Поддержка в каждом браузере для видеокодеков выглядит так:

• Firefox: Ogg Theora / Vorbis
• Опера: Ogg Theora / Vorbis
• Chrome: Ogg Theora / Vorbis и h.264
• Safari: h.264 (Ogg Theora / Vorbis с установленными компонентами XiphQT)
• IE9: h.264

Я бы порекомендовал также воспользоваться альтернативой Ogg Theora. Я знаю, что это не идея, если вы беспокоитесь о дисковом пространстве, но, благодаря патентным гонорарам и страху перед патентными троллями, мы столкнулись с ситуацией.

Answer 6

Поскольку Chrome фактически никогда не отключал поддержку h264, Firefox сохранил ее и планирует улучшить поддержку этого формата.

https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats (примерно 1/3 пути вниз по странице)