Codifique video para reproducción controlada por html5 y javascript

Quiero crear algo como la página del producto Apples Mac Pro http://www.apple.com/de/mac-pro/ donde la reproducción de video html5 se controla a través de javascript (configurando manualmente el atributo currentTime del video). Funciona perfectamente cuando uso su video, pero no funciona en absoluto con mis propios videos. ¿Cómo puedo convertir mis videos para que se reproduzcan bien?

Usando ffmpeg probé todo lo que se me ocurrió como

  • eliminando la pista de audio
  • disminuyendo las dimensiones de los videos
  • disminuyendo la velocidad de fotogramas
  • establecer la velocidad de fotogramas a 30 fps (como en el video de Apple)
  • convertir su video a jpg y crear un video a partir de esos marcos (pensé que tal vez el espectro de color marcaba la diferencia (principalmente negro))
  • diferentes opciones de calidad (-crf [18-30] -preset [muylento-muyrápido])
  • disminuyendo la duración del video (el video de Apple tiene una duración de 47 s)

También probé algunas opciones diferentes de freno de mano, pero nada ayudó.

http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4

ffmpeg -i macpro_main_desktop.mp4

muestra:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'macpro_main_desktop.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp42mp41
    creation_time   : 2013-10-16 22:55:31
  Duration: 00:00:47.03, start: 0.000000, bitrate: d kb/s
    Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1120x840, 2797 kb/s, 30 fps, 30 tbr, 30 tbn, 60 tbc (default)
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : Apple Video Media Handler
    Stream #0:1(eng): Data: none (rtp  / 0x20707472), 139 kb/s
    Metadata:
      creation_time   : 2013-10-16 22:55:31
      handler_name    : hint media handler

Aquí hay un ejemplo de los videos que codifiqué a través de ffmpeg:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video-720-main-30fps.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.15.102
  Duration: 00:05:00.49, start: 0.033333, bitrate: 420 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 284 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
Dudo que la presencia de una pista de audio o el tamaño o la velocidad del cuadro tenga algo que ver con eso. Intente agregar una pista de pistas, como en el video de Apple, así que "-movflags faststart+rtphint"
¿Está seguro de que el problema no es su código HTML o Javasript? Incrustar videos en HTML5 es un poco complicado, especialmente si desea controlarlo usando controles personalizados/Javascript
Hola. @Mulvya gracias por la pista con la pista de pistas. Realmente ayudó, pero la reproducción sigue siendo muy lenta. @MoritzLost Estoy bastante seguro de que el video es el problema porque cuando uso Apples Video puedo buscar sin ningún retraso. El código es atm extremadamente simple. Acabo de actualizar la propiedad currentTime del video en el desplazamiento.
¿Puedes vincular tus videos y los de Apple?
@Mulvya Agregué los enlaces.
El primer cambio que sugeriría es codificar en el perfil principal o de línea de base, así que primero intente "-profile:v de línea de base". Tal vez la menor cantidad de marcos de referencia haga la diferencia.
Bonito. Reacciona mucho más rápido ahora. (Al menos en Chrome y Safari) ffmpeg -i input.mp4 -profile:v baseline -movflags faststart+rtphint output.mp4¿Hay más ajustes que podrían mejorarlo aún más?
Puede agregar "-x264opts keyint=3:min-keyint=2" para imitar aún más el archivo de Apple.

Respuestas (1)

El video de Apple usa un perfil con menos marcos de referencia y también lleva una pista de sugerencias de transmisión.

La siguiente plantilla de comando ffmpeg debería crear un archivo MP4 de búsqueda rápida:

ffmpeg -i input -c:v libx264 -profile:v baseline -x264opts keyint=3:min-keyint=2 -{other video encoding parameters} -{audio encoding parameters} -movflags +faststart+rtphint output.mp4

Dado el perfil y los tamaños de GOP establecidos, la eficiencia de compresión no será excelente.

@gang ¿Esto resolvió tu problema? Intenté esto pero todavía estoy atascado con un fregado lento :-(
Muestre la salida completa de la consola del comando que ejecutó. Puedes subirlo a pastebin o similar.
@bennlich sí, esto resolvió mi problema.
@Mulvya que ella sopla: pastebin.com/tiSDPAVZ
Añadir -r 25_ Lo que puedo ver es que tiene una entrada de velocidad de cuadro variable con un valor de FPS marcado incorrectamente almacenado en el contenedor y eso lleva a FFmpeg a usar valores de base de tiempo muy grandes.
Sin suerte :-( Nueva salida: pastebin.com/e9aJpyF1 ¿Los valores de base de tiempo muy grandes a los que te refieres son lo que se informa como tbn? Además, ¿dónde ves el FPS marcado incorrectamente almacenado en el contenedor?
El tbrde su entrada: esa es la velocidad de fotogramas almacenada o supuesta. fpslo que muestra ffmpeg es el total de fotogramas/duración. ¿En qué estás probando el borrado? ¿Tienes un archivo que se borra rápido?
Aquí está la información de un archivo que se borra muy rápido: pastebin.com/z1WdEYAK . Estoy limpiando un elemento de video HTML5, como aquí: codepen.io/gfschultheiss/pen/zvQmPz .
@Mulvya También me pregunto: ¿cómo tbrafecta la velocidad de búsqueda?
A menos que sea muy alto, no debería. La tasa de bits importa más.
Mmm k. ¿Notó alguna pista en el volcado del archivo de limpieza rápida ( pastebin.com/z1WdEYAK )? No estoy seguro de dónde buscar a continuación.
Codifique video para reproducción controlada por html5 y javascript
RespuestasAquíPolítica de privacidad1y, 0v