HTML5 video performance

Question

Desde hace algunas semanas, desarrollo un sitio web basado en HTML5 y tengo algunos problemas importantes de rendimiento. Estos problemas seguramente dependen de las exigencias del diseño, pero dado que la codificación todavía es muy delgada y utiliza solo unos pocos tipos de medios, me pregunto si he pasado por alto algo que causa estos problemas.

Antes de decirlo, sé que un sitio web Flash podría hacer lo mismo fácilmente con un rendimiento mucho mejor. Intento obtener una funcionalidad/diseño similar con solo HTML (5), que ya debería ser posible.

Estoy hablando de un sitio web con un fondo de video de pantalla completa (HTML5) y el contenido principal en una columna central ancha con fondo negro. El contenido puede contener otros videos HTML5 en tamaño de estilo YouTube/Vimeo. Aquí es donde la CPU entra en pánico a mitad de camino, y yo trabajo en una Mac Pro reciente ...

Configuré el video (de cualquier tamaño desde 480i a 1080i) para escalar con la anchura & de la ventana. También lo configuré en 1080i y 100% de tamaño. También agregué JavaScript para pausar el fondo cuando uno de los videos de proyecto más pequeños estaba enfocado. Todas las variaciones causaron una inaceptable lentitud en el navegador o en la situación del sitio (se reprodujo otro video).

Me dijeron this example tendría el mejor rendimiento. Pero dupliqué la velocidad de datos y la resolución sin ningún beneficio.

¿Quién es un experto en rendimiento de video web?

Answer 1

Aspectos a tener en cuenta: los elementos de vídeo y lienzo HTML5 utilizan aceleración de hardware de su GPU y, por lo tanto, dependen no solo del navegador sino también de la máquina en la que se ejecuta el navegador. P.ej. Chrome en una máquina con una tarjeta gráfica pobre será peor que Chrome en una máquina con una tarjeta gráfica de alto nivel. También debe considerar el ancho de banda y la latencia de su red.

Sugeriría eliminar las variables; cargue el video localmente al principio para cortar la red, luego pruebe desde diferentes máquinas de diferentes capacidades de hardware y vea qué funciona mejor. También puedes probar diferentes codificaciones. OGG vs m4v vs h264

Por último, me gustaría ver la resolución. 1080i en una pantalla pequeña puede que no valga la pena.

Answer 2

Creo que debería reconsiderar su decisión de utilizar HTML5.

No importa si tiene 8 núcleos o incluso 2 CPU. HTML5 no está terminado y la implementación es lenta y con errores en este momento. Probablemente estés haciendo todo bien.

Mire los grandes jugadores (vimeo, google), cuando cambien a HTML5, ese es probablemente el momento de hacerlo. No estoy de acuerdo con las personas que dicen "html5 es bueno para todo". Creo que por ahora lamentablemente es bueno para iDevices (iphone, ipad) ... donde tienes un navegador para que la especificación esté "configurada" aquí.

Además, no puede cambiar HTML5 VIDEO a pantalla completa. Creo que eso te dice mucho.