Mejores prácticas H.264/FLV para HTML

Question

Ejecuto un sitio web que tiene como parte de él alrededor de 700 videos de referencia (Y no, no es pornografía: descuide su mente :-)).

Los videos se encuentran actualmente en formato FLV. Usamos el JWPlayer para renderizar esos videos. IIS6 alojado. Todo funciona bien

Según tengo entendido, H.264 (no FLV y probablemente no OGG) es el estándar emergente de video HTML5 preferido. Hoy en día, el iPad solo respeta H.264 o YouTube. Presumiblemente, pronto muchos navegadores más importantes seguirán el ejemplo de Apple y solo respetarán la etiqueta HTML5.

Bien, entonces creo que puedo encontrar la manera de convertir mis videos existentes en el formato H.264 adecuado. Hay varias herramientas disponibles, incluyendo ffmpeg.exe. Todavía no lo he probado, pero no creo que eso vaya a ser un problema después de jugar con la configuración del códec.

Mi pregunta es más sobre el contenedor en sí, es decir, la planificación de la transición elegante para todos los usuarios. ¿Cuál es la recomendación de mejores prácticas para renderizar estos videos? Si solo uso la etiqueta HTML5, es de suponer que cualquier navegador que aún no admita HTML5 no verá los videos. Y si los renderizo en formato Flash a través de JWPlayer u otro reproductor, entonces no se podrán reproducir en el iPad. ¿Tengo que hacer una fea detección de UserAgent aquí para descubrir qué renderizar?

Sé que JWPlayer admite medios H.264, pero ¿no es el reproductor en sí mismo un componente de Flash y, por lo tanto, no se puede reproducir en el iPad? Lo siento si no estoy siendo claro, pero me estoy rascando la cabeza en un elegante plan de transición que funcionará para los navegadores actuales, el iPad y la próxima ola de HTML5. No soy un experto en video, por lo que cualquier consejo sería bienvenido, gracias.

Answer 1

Tenga en cuenta que Firefox no es compatible con H.264 con la etiqueta de video, por lo que si desea un elegante repliegue, entonces debe presentar su etiqueta de video como a continuación y tener una versión OGG del video.

 <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

No estoy seguro de si se trata de una respuesta o simplemente un comentario, pero realmente necesito para desafiar a uno de los supuestos de la pregunta original: "Es de suponer que pronto muchos más importantes navegadores sigan el ejemplo de Apple y respeta solo la etiqueta HTML5 ".

Esto simplemente no está respaldado por nada que yo pueda ver.

1. Todos los navegadores de escritorio admiten complementos, incluido Flash. La mayoría de los teléfonos inteligentes/tabletas que no son de Apple admiten Flash, admiten complementos de abitrary o admiten navegadores alternativos.
2. Todos los navegadores, incluso el iPhone OS uno, admiten la etiqueta de objeto y al menos intentan hacer algo con ella. ¡Incluso admiten cosas como marquesinas y etiquetas de fuentes! La etiqueta de objeto seguirá existiendo durante mucho tiempo, y hasta donde sé, es parte de HTML5.
3. Firefox, probablemente el navegador n. ° 2 después de las diversas versiones de IE, no admite H.264 en este momento.
4. Microsoft ha dejado en claro que no les gusta Flash y prefiere que la gente use Silverlight, respaldando mi sensación de que la etiqueta del objeto llegó para quedarse. Se han comprometido vagamente a admitir etiquetas nativas de video HTML5 solo en IE9. Mientras tanto, envían el complemento Flash como parte del sistema operativo en Vista y Win7.

De todos modos, para llegar a la verdadera cuestión de la pregunta: "Mi pregunta es más sobre el contenedor en sí, es decir, la planificación de la transición elegante para todos los usuarios.¿Cuál es la recomendación de mejores prácticas para representar estos videos?

La etiqueta de video HTML5 admite el nombre de múltiples fuentes, por lo que puede poner el video nativo H.264 como el "primario" y el reproductor Flash como el "respaldo" para ser utilizado si el navegador no tiene soporte para el flujo de vídeo H.264 recta

<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

el apoyo en cada navegador para códecs de vídeo es la siguiente:.

• Firefox: Ogg Theora/Vorbis
• Opera: Ogg Theora/Vorbis
• Chrome: Ogg Theora/Vorbis y H.264
• Safari: H.264 (Ogg Theora/Vorbis con componentes instalados XiphQT)
• IE9: H.264

I recomendaría también una alternativa Ogg Theora. Sé que no es una idea si le preocupa el espacio en disco, pero con todo gracias a las regalías de patentes y el miedo a los trolls de patentes, es la situación con la que estamos atrapados.

Answer 4

No responde su pregunta directamente, pero doom9.org tiene muchísimos tutoriales sobre conversión/procesamiento de video. podría serle útil

Answer 5

Sugiera que lea video for everybody para una buena implementación del navegador cruzado. También puede usar H.264 for Flash Fallback pero, como dice Lachlan, también debe renderizar con Ogg para una compatibilidad completa entre navegadores.

Answer 6

Dado que Chrome nunca desconectó la conexión para la compatibilidad con h264, Firefox también la mantuvo y está planeando una mejor compatibilidad con el formato.

https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats (aproximadamente 1/3 de la manera abajo de la página)