Codieren Sie Videos für HTML5- und Javascript-gesteuerte Wiedergabe

Ich möchte so etwas wie Apples Mac Pro-Produktseite http://www.apple.com/de/mac-pro/ erstellen, auf der die Wiedergabe von HTML5-Videos über Javascript gesteuert wird (durch manuelles Setzen des Attributs currentTime des Videos). Es funktioniert perfekt, wenn ich ihr Video verwende, aber überhaupt nicht mit meinen eigenen Videos. Wie kann ich meine Videos konvertieren, damit sie gut wiedergegeben werden?

Mit ffmpeg habe ich alles versucht, was mir einfiel

  • Entfernen der Audiospur
  • Verringern der Videoabmessungen
  • die Framerate verringern
  • Einstellen der Framerate auf 30fps (wie in Apples Video)
  • Konvertieren ihres Videos in JPGs und Erstellen eines Videos aus diesen Frames (ich dachte, vielleicht macht das Farbspektrum einen Unterschied (hauptsächlich Schwarz))
  • verschiedene Optionen für die Qualität (-crf [18-30] -preset [veryslow-veryfast])
  • Verringern der Länge des Videos (das Video von Apple ist 47 Sekunden lang)

Ich habe auch verschiedene Optionen für die Handbremse ausprobiert, aber nichts hat geholfen.

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

zeigt an:

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

Hier ist ein Beispiel für die Videos, die ich mit ffmpeg codiert habe:

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
Ich bezweifle, dass das Vorhandensein einer Audiospur oder Bildgröße oder -rate irgendetwas damit zu tun hat. Versuchen Sie, eine Hinweisspur hinzuzufügen, wie im Apple-Video, also "-movflags faststart+rtphint".
Sind Sie sicher, dass das Problem nicht an Ihrem HTML- oder Javasript-Code liegt? Das Einbetten von Videos in HTML5 ist etwas knifflig, besonders wenn Sie es mit benutzerdefinierten Steuerelementen/Javascript steuern möchten
Hi. @Mulvya danke für den Hinweis mit dem Hinweistrack. Es hat wirklich geholfen, aber die Wiedergabe ist immer noch sehr langsam. @MoritzLost Ich bin mir ziemlich sicher, dass das Video das Problem ist, denn wenn ich Apples Video verwende, kann ich ohne Verzögerung durchscrubben. Der Code ist extrem einfach atm. Ich aktualisiere einfach die Eigenschaft currentTime des Videos beim Scrollen.
Können Sie auf Ihre und Apples Videos verlinken?
@Mulvya Ich habe die Links hinzugefügt.
Die erste Änderung, die ich vorschlagen würde, ist die Codierung im Haupt- oder Basisprofil, also versuchen Sie zuerst "-profile:v baseline". Vielleicht machen die weniger Referenzrahmen einen Unterschied.
Nett. Es reagiert jetzt viel schneller. (Zumindest in Chrome und Safari) ffmpeg -i input.mp4 -profile:v baseline -movflags faststart+rtphint output.mp4Gibt es weitere Optimierungen, die es noch weiter verbessern könnten?
Sie könnten "-x264opts keyint=3:min-keyint=2" hinzufügen, um die Apple-Datei weiter nachzuahmen.

Antworten (1)

Das Apple-Video verwendet ein Profil mit weniger Referenzbildern und enthält auch eine Streaming-Hinweisspur.

Die folgende ffmpeg-Befehlsvorlage sollte eine schnell suchende MP4-Datei erstellen:

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

Angesichts der eingestellten Profil- und GOP-Größen ist die Komprimierungseffizienz nicht besonders gut.

@gang Hat das dein Problem gelöst? Ich habe das versucht, stecke aber immer noch mit einem langsamen Peeling fest :-(
Zeigen Sie die vollständige Konsolenausgabe des von Ihnen ausgeführten Befehls an. Sie können es in Pastebin oder ähnliches hochladen.
@bennlich ja das hat mein Problem gelöst.
@Mulvya, dass sie bläst: pastebin.com/tiSDPAVZ
hinzufügen -r 25. Was ich sehen kann, ist, dass Sie eine variable Bildrateneingabe mit einem falsch gekennzeichneten FPS-Wert haben, der im Container gespeichert ist, und das führt dazu, dass FFmpeg sehr große Zeitbasiswerte verwendet.
Kein Glück :-( Neue Ausgabe: pastebin.com/e9aJpyF1 Die sehr großen Zeitbasiswerte, auf die Sie sich beziehen, werden als gemeldet tbn? Wo sehen Sie auch die falsch gekennzeichneten FPS, die im Container gespeichert sind?
Die tbrIhrer Eingabe - das ist die gespeicherte oder angenommene Framerate. fpsangezeigt von ffmpeg ist Gesamtbilder / Dauer. Worin testen Sie das Scrubben und haben Sie eine Datei, die schnell scrubbt?
Hier sind die Informationen zu einer Datei, die sehr schnell gescrubbt: pastebin.com/z1WdEYAK . Ich schrubbe ein HTML5-Videoelement wie hier: codepen.io/gfschultheiss/pen/zvQmPz .
@Mulvya Ich frage mich auch - wie wirkt sich dies auf die Suchgeschwindigkeit aus tbr?
Es sei denn, wenn es sehr hoch ist, sollte es nicht. Bitrate ist wichtiger.
mmh k. Haben Sie im Speicherauszug der Schnell-Scrubbing-Datei ( pastebin.com/z1WdEYAK ) irgendwelche Hinweise bemerkt? Ich bin mir nicht sicher, wo ich als nächstes suchen soll.
Codieren Sie Videos für HTML5- und Javascript-gesteuerte Wiedergabe
AntwortenHierDatenschutz-Bestimmungen1y, 0v