google chrome - español - Vídeo HTML5: MP4 con codificación ffmpeg no se reproduce en ningún navegador(aunque juega en VLC)

abrir facebook en google chrome

Question

Estoy tratando de publicar videos HTML5 en archivos MP4 y WEBM. No puedo lograr que todos los navegadores funcionen:

• Los navegadores compatibles con WEBM (escritorio Chrome, escritorio Firefox) reproducen bien los videos.

• Los navegadores que usan MP4 no funcionan (IE, Safari, Android).

• WEBM se sirve como video/webm .

• MP4 se sirve como video/mp4 .

Minimal JSFiddle at: http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

Errores del navegador:

• IE11: 11.0.9600.17126 / 11.0.9 KB2957689

  Error: Unsupported video type of invalid file path

• Navegador Android y Chrome Android:

  No hay error, el video simplemente se niega a comenzar

Prueba de cordura: los siguientes tres valores son iguales:

• Tamaño del archivo recibido: curl <video URL> | wc -c curl <video URL> | wc -c

• Tamaño real del archivo: stat -c %s <video file>

• Tamaño de archivo especificado por el servidor: encabezado HTTP Content-Length .

Uno de los videos en cuestión está en:

• MP4 : http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4

  Content-Type: video/mp4

  No se reproduce en Chrome / IE11 / Chrome Android / Android Browser

  Juega en VLC

  Parámetros de codificación FFMPEG:

  -an -vcodec libx264 -s hd720 -flags +loop+mv4 -cmp 256 -partitions +parti4x4+parti8x8+partp4x4+partp8x8 -subq 6 -trellis 0 -refs 5 -bf 0 -coder 0 -me_range 16 -g 250 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -qmin 10 -qmax 51 -qdiff 4 -movflags faststart

  Estos se obtuvieron de una búsqueda profunda de la mejor manera de codificar MP4 para navegadores móviles. Si uso -an -vcodec libx264 -s hd720 entonces ese video tampoco funciona en los navegadores.

• WEBM : http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm

  Content-Type: video/webm

  Juega en Chrome / Firefox

  Parámetros de codificación FFMPEG:

  -an -vcodec libvpx -s hd720

El HTML relevante (clases, póster, etc. eliminado):

<video preload="metadata" controls="controls">
<source type="video/mp4" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4">
<source type="video/webm" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm">
</video>

JSFiddle en http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

Answer 1

Ningún navegador que reproduzca MP4 realmente parece tener soporte completo para MP4, especialmente problemático para MS y los navegadores de Apple que están tratando de crear un monopolio de infierno / realeza alrededor del formato.

Lo hice funcionar recodificando con los siguientes parámetros de FFMPEG:

-pix_fmt yuv420p
-preset slow
-profile:v baseline

Dando una línea de comando completa de:

ffmpeg
<INPUT DEFINITION>
-an
-s hd720
-vcodec libx264
-b:v BITRATE
-vcodec libx264
-pix_fmt yuv420p
-preset slow
-profile:v baseline
-movflags faststart
-y <OUTPUT PATH>

El problema era en última instancia otro ejemplo de vendedores de software propietarios que no respaldaban adecuadamente sus propios estándares.