html5 - playsinline - FFMPEG Convert HTML 5 Video NO funciona

video html ios (7)

Estoy usando FFMPEG para convertir un video a .mp4,, ogg, .webm para que pueda verse en todos los navegadores compatibles con HTML5 que usan la etiqueta de video . El problema es que puedo convertir el video a los 3 formatos requeridos pero no lo muestra en la etiqueta del video , todo lo que obtengo es IE9: cruz roja, Firefox: cruz gris, ¿podría ser un problema con la conversión o es algo que ver con la forma en que los estoy agregando a la fuente de la etiqueta de video. Esto es lo que he hecho :

FFmpeg línea (s) de comando:
ffmpeg -i test.mp4 test.mp4 ffmpeg -i test.mp4 test.ogg ffmpeg -i test.mp4 test.webm
Aquí está la etiqueta del video:
<video id="video" height="340" width="470" onplaying="PlayVideoFromVid(''PAUSE'')" onpause="PlayVideoFromVid(''PLAY'')" onended="ResetVideo()" preload="true" autobuffer="true" controls="true"> <source src="test.ogg" type="video/ogg"></source> <source src="test.mp4" type="video/mp4"></source> </video>
Líneas de configuración web para el soporte de video:
<staticContent> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".ogg" mimeType="audio/ogg" /> <mimeMap fileExtension=".oga" mimeType="audio/ogg" /> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".webm" mimeType="video/webm" /> </staticContent>

Sería fantástico si alguien pudiera enviarme los parámetros necesarios para que ffmpeg convierta el video a los 3 formatos requeridos y un ejemplo de cómo configuran la fuente en la etiqueta de video para mostrarlos nuevamente. Y cualquier otro consejo sería genial, como configurar la calidad, etc. al realizar la conversión.

Gracias por adelantado.

Asegúrate de que tu video se sirva con el Content-type correcto

Debe ser Content-Type:video/mp4 para mp4 / m4v.

Creo que porque todavía soy un novato, ¿no puedo dejar comentarios? Así que dejar esto como una respuesta, aunque creo que está más en la línea de una conjetura.

Comenzó a jugar con video HTML5 hace una semana o así. Me encontré con muchos problemas que finalmente se debieron a los archivos de película convertidos con los que estaba trabajando. Aquí está el código que usé para mis ejemplos:

Modelé mi código después de la escritura de Mark Pilgrim''s Dive into HTML (Video) .

Algunas cosas que se me ocurren para intentar:

1) Eliminar los atributos adicionales de su etiqueta. Estoy menos familiarizado con lo que estás implementando (en juego, en pausa), pero tal vez intente usar primero lo básico: ancho, alto y controles. A ver si esto ayuda.

2) En mis pruebas, convertí mis versiones .ogg y .webm usando Miro . Por alguna razón, las películas aparentemente reproducían archivos localmente ... pero cuando las veía más de una vez en mis navegadores, obtenía pantallas en blanco. Terminé usando Firefogg para convertir mis versiones .ogg y .webm. Era un comportamiento extraño.

No estoy seguro de si FFmpeg es un factor de ruptura de tratos y algo que debe usar como parte de su flujo de trabajo. Pero si solo buscas poner en funcionamiento tu código y tus películas de ejemplo, Firefogg hizo el truco por mí.

En última instancia, me di cuenta de cuál era la causa cuando cambié las versiones de trabajo de otras películas, en lugar de las convertidas. Te recomiendo que intentes enchufar las versiones .mp4, .webm y .ogg de Big Buck Bunny ... y ver si puedes hacer que se muestren. Al menos de esa manera, podría aislar si se trata de un problema de sintaxis o conversión.

3) Finalmente, recomiendo probar un archivo de video y un navegador a la vez. Esto es probablemente un hecho, pero todavía vale la pena tirarlo por ahí.

Nota: una vez que esté listo para usar cada tipo de archivo, asegúrese de enumerar primero la versión .mp4. Esto es de la reseña de video HTML5 de Pilgrim:

Los iPads que ejecutaban iOS 3.x tenían un error que les impedía notar nada más que la primera fuente de video que aparece en la lista. iOS 4 (una actualización gratuita para todos los iPads) corrige este error. Si desea enviar video a los propietarios de iPad que aún no se hayan actualizado a iOS 4, primero deberá listar su archivo MP4, seguido de los formatos de video gratuitos.

Habiendo probado la mayoría de las sugerencias anteriores, esto es lo que realmente me funcionó para convertir archivos wmv a pequeños mp4, webm, ogg en una máquina con Windows7-64:

64bit/ffmpeg -i test.wmv test.mpg old/ffmpeg -i test.mpg -vcodec h264 -s 320x240 test.mp4 32bit/ffmpeg -i test.mpg -vcodec libvpx -acodec libvorbis -f webm -s 320x240 test.webm 32bit/ffmpeg -i test.mpg -vcodec libtheora -acodec libvorbis -s 320x240 test.ogg

old / ffmpeg es la versión SVN-r5570

64bit / ffmpeg es la versión N-38292-ga4c22e3 construida el 27/02/12 14:55:47

32bit / ffmpeg es la versión N-39267-g4082198 construida el 25/03/12 20:25:08

(Solo la versión de 64 bits leería el wmv, así que lo utilicé para convertir a mpg como un formato común. Solo el ffmpeg antiguo crearía un mp4).

Probé muchos archivos de video, opciones de codificación, configuraciones de servidor, versiones de FFMPEG, otros codificadores de video, etc., antes de descubrir que una cosa a tener en cuenta al servir archivos MP4 para IE9 es la metainformación del archivo moov atom incrustado en el propio archivo MP4. . Si se encuentra al final del archivo, donde algunos codificadores, incluido ffmpeg, lo colocan, IE9 no comenzará a reproducir el video a menos que se descargue el archivo completo. La reubicación de los metadatos de Moov Atom al principio del archivo permite la descarga progresiva del archivo MP4, e IE9 maneja bien el video.

Hay una herramienta llamada qt-faststart para realizar esta operación. Me funcionó de maravilla compilando y usando la versión de línea de comandos de Linux distribuida con ffmpeg.

make tools/qt-faststart sudo cp tools/qt-faststart /usr/local/bin/ qt-faststart original_file.mp4 modified_file.mp4

Resuelto, gracias por toda la ayuda :) Encontré lo siguiente:

1. Necesitas descargar la última versión de ffmpeg + los presets:

ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/

2. Necesitas crear una variable de entorno HOME:

(a) ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/

(b) www.itechtalk.com/thread3595.html

3. Copie los ajustes preestablecidos en la carpeta de variables de entorno

4. Necesita usar los siguientes comandos para convertir usando ffmpeg:

Para mp4 (H.264 / ACC):

ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"

Para webm (VP8 / Vorbis):

ffmpeg -i "INPUTFILE" -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"

Para ogv (Theora / Vorbis):

ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv"

Tuve el mismo problema con IE9 que muestra una cruz roja cuando intento mostrar el video .mp4. Manteniéndolo simple usando ffmpeg (como sugirió Michas) resolví el problema por mí.

<video id="movie" width="600" height="360" controls preload="auto"> <source src="http://yourDomain.com/faceplant.mp4" type=''video/mp4; codecs="avc1.42E01E, mp4a.40.2"''></source> <source src="http://yourDomain.com/faceplant.webm" type=''video/webm; codecs="vp8.0,vorbis"''></source> <source src="http://yourDomain.com/faceplant.ogv" type=''video/ogg; codecs="theora, vorbis"''></source> </video>

Los parámetros ffmpeg: (Utilicé .ogv de ffmpeg2theora como mi archivo de entrada):

ffmpeg -i input_file.ogv -vcodec libx264 -vpre hq output_file.mp4

Mi versión ffmpeg:

ffmpeg 0.8.3 libavutil 51. 9. 1 / 51. 9. 1 libavcodec 53. 7. 0 / 53. 7. 0 libavformat 53. 4. 0 / 53. 4. 0 libavdevice 53. 1. 1 / 53. 1. 1 libavfilter 2. 23. 0 / 2. 23. 0 libswscale 2. 0. 0 / 2. 0. 0 libpostproc 51. 2. 0 / 51. 2. 0

Yo probaría este código primero. Es lo más simple posible.

<video controls="true"> <source src="test.mp4" type="video/mp4"></source> <source src="test.webm" type="video/webm"></source> <source src="test.ogv" type="video/ogg"></source> </video>

Creación de archivos mp4, número mínimo de argumentos. Desafortunadamente, no lo he probado mucho.

ffmpeg -i input_file -vcodec libx264 -vpre medium output_file.mp4

Para crear archivos ogv debes usar ffmpeg2theora. Hay demasiados problemas con ffmpeg.