H.264 / лучшие практики FLV для HTML
Я выполняю веб-сайт, который имеет как часть его приблизительно 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. Я не видео эксперт, таким образом, любой совет приветствовался бы, спасибо.
5 ответов
Не отвечает на ваш вопрос напрямую, но на doom9.org есть много отличных уроков по конвертации/обработке видео. может быть полезно для вас
Имейте в виду, что Firefox не поддерживает H.264 с тегом видео, поэтому, если вам нужен изящный откат, вы должны отобразить тег видео, как показано ниже, и иметь версия видео в формате 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>
Каждый браузер поддерживает видеокодеки следующим образом:
- Firefox: Ogg Theora / Vorbis
- Opera: Ogg Theora / Vorbis
- Chrome: Ogg Theora / Vorbis и h.264
- Safari : h.264 (Ogg Theora / Vorbis с установленными компонентами XiphQT)
- IE9: h.264
Я бы также рекомендовал использовать альтернативу Ogg Theora. Я знаю, что это не идея, если вас беспокоит дисковое пространство, но, несмотря на все благодаря патентным гонорарам и страху перед патентными троллями, мы застряли в этой ситуации.
Я не уверен, является ли это ответом или просто комментарием, но мне действительно нужно оспорить одно из предположений исходного вопроса: браузеры последуют примеру Apple и будут уважать только тег HTML5 »
. Это просто не подтверждается ничем, что я вижу.
- Все настольные браузеры поддерживают плагины, включая Flash. Большинство смартфонов / планшетов сторонних производителей поддерживают Flash, поддерживают дополнительные плагины или альтернативные браузеры.
- Все браузеры, даже iPhone OS, поддерживают тег объекта и, по крайней мере, пытаются что-то с ним сделать. Они даже поддерживают такие вещи, как выделение и теги шрифтов! Тег объекта будет существовать еще очень долго, и, насколько мне известно, он даже является частью HTML5.
- Firefox, вероятно, браузер №2 после различных версий IE, в настоящее время не поддерживает H.264.
- 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>
Предлагаем вам прочитать видео для всех для хорошей кроссбраузерной реализации. Вы также можете использовать резервный вариант H.264 для Flash, но, как говорит Лахлан, вы должны также выполнять рендеринг с помощью Ogg для полной кроссбраузерной совместимости.