it-swarm.com.de

FFMPEG-Konvertierung von HTML 5-Video funktioniert NICHT

Ich verwende FFMPEG, um ein Video in .mp4, ogg, .webm zu konvertieren, damit es in allen HTML5-fähigen Browsern mit dem Video-Tag angezeigt werden kann. Das Problem ist, dass ich es schaffe, das Video in die 3 erforderlichen Formate zu konvertieren, aber es zeigt das Video nicht im Video-Tag an , alles was ich bekomme ist IE9: Rotes Kreuz, Firefox: Graues Kreuz, könnte es ein Problem sein mit der Konvertierung oder hat das etwas damit zu tun, wie ich sie zur Quelle des Video-Tags hinzufüge? Hier ist was ich getan habe :

  1. FFmpeg Kommandozeile (n):

    ffmpeg -i test.mp4 test.mp4
    ffmpeg -i test.mp4 test.ogg
    ffmpeg -i test.mp4 test.webm
    
  2. Hier ist das Video-Tag:

    <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>
    
  3. Webconfig-Zeilen für die Video-Unterstützung:

    <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>
    

Es wäre großartig, wenn mir jemand die erforderlichen Parameter für ffmpeg senden könnte, um das Video in die 3 erforderlichen Formate zu konvertieren, und ein Beispiel dafür, wie er die Quelle im Video-Tag so einstellt, dass sie wieder angezeigt wird. Und jeder andere Rat wäre großartig, wie man die Qualität usw. einstellt, wenn man die Konvertierung vornimmt.

Danke im Voraus.

16
Brad

Ich habe es geklärt, danke für die Hilfe :) Ich fand Folgendes:

1. Sie müssen das neueste ffmpeg + die Voreinstellungen herunterladen:

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

2. Sie müssen eine HOME-Umgebungsvariable erstellen:

(a) www.moosechips.com/2009/08/installing-ffmpeg-binary-in-windows/

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

3. Kopiere die Presets unter den Umgebungsvariablen-Ordner

4. Sie müssen die folgenden Befehle verwenden, um mit ffmpeg zu konvertieren:

Für mp4 (H.264/ACC):

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

Für webm (VP8/Vorbis):

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

Für ogv (Theora/Vorbis):

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

Ich würde diesen Code zuerst versuchen. Es ist so einfach wie möglich.

    <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>

Erstellen von mp4-Dateien, minimale Anzahl von Argumenten. Leider habe ich es nicht viel getestet.

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

Zum Erstellen von ogv-Dateien sollten Sie ffmpeg2theora verwenden. Es gibt zu viele Probleme mit ffmpeg.

3
Michas

Ich habe viele Videodateien, Codierungsoptionen, Serverkonfigurationen, FFMPEG-Versionen, andere Videocodierer usw. ausprobiert, bevor ich herausfand, dass beim Bereitstellen von MP4-Dateien für IE9 die Datei-Metainformationen mit dem Namen moov atom in der MP4-Datei selbst zu berücksichtigen sind . Befindet es sich am Ende der Datei, wo einige Encoder, einschließlich ffmpeg, es platzieren, startet der IE9 die Wiedergabe des Videos erst, wenn die gesamte Videodatei heruntergeladen wurde. Wenn Sie die Metadaten von moov atom an den Anfang der Datei verschieben, können Sie die MP4-Datei nach und nach herunterladen, und IE9 verarbeitet das Video problemlos.

Es gibt ein Tool namens qt-faststart , um diese Operation auszuführen. Ich habe Wunder gewirkt, als ich die mit ffmpeg gelieferte Linux-Befehlszeilenversion kompiliert und verwendet habe.

make tools/qt-faststart
Sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
1
Viktor

Ich denke, weil ich noch ein Neuling bin, darf ich keine Kommentare hinterlassen? Lassen Sie dies als Antwort, obwohl ich denke, es ist eher nach dem Vorbild einer Vermutung.

Spielte seit ungefähr einer Woche mit HTML5-Videos. Ich stieß auf viele Probleme, die sich letztendlich aufgrund der konvertierten Filmdateien herausstellten, mit denen ich arbeitete. Hier ist der Code, den ich für meine Beispiele verwendet habe:

<video id="movie" width="600" height="338" poster="http://yourDomain.com/yourDirectory/posterFrame.jpg" controls="true" autoplay="true">
    <source src="http://yourDomain.com/yourDirectory/yourMovie.mp4" type='video/mp4' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.webm" type='video/webm' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf"><param name="movie" value="http://yourDomain.com/flowplayer/flowplayer-3.2.7.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"clip": {"url": "http://yourDomain.com/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' /></object>
</video>

Ich habe meinen Code nach Mark Pilgrims Dive into HTML (Video) write-up modelliert.

Ein paar Dinge, die ich mir vorstellen kann:

1) Entfernen Sie die zusätzlichen Attribute aus Ihrem Tag. Ich bin weniger mit der Implementierung vertraut (Onplaying, Onpause), versuche jedoch, zunächst nur die Grundlagen zu verwenden: Breite, Höhe und Steuerelemente. Mal sehen, ob das hilft.

2) In meinen Tests habe ich meine .ogg- und .webm-Versionen mit Miro konvertiert. Aus irgendeinem Grund spielten die Filme scheinbar Dateien lokal ab ... aber wenn ich sie mehrmals in meinem Browser ansah, bekam ich leere Bildschirme. Schließlich habe ich Firefogg verwendet, um meine .ogg- und .webm-Versionen zu konvertieren. Es war seltsames Verhalten.

Ich bin nicht sicher, ob FFmpeg ein Dealbreaker ist und was Sie als Teil Ihres Workflows verwenden müssen. Aber wenn Sie nur Ihren Code und Ihre Beispielfilme zum Laufen bringen möchten, hat Firefogg den Trick für mich getan.

Letztendlich wurde mir klar, was die Ursache war, als ich funktionierende Versionen anderer Filme anstelle meiner konvertierten austauschte. Ich würde empfehlen, dass Sie versuchen, die .mp4-, .webm- und .ogg-Versionen von Big Buck Bunny einzustecken. Zumindest auf diese Weise können Sie isolieren, ob es sich um ein Syntax- oder ein Konvertierungsproblem handelt.

3) Schließlich würde ich empfehlen, jeweils eine Videodatei und einen Browser zu testen. Dies ist wahrscheinlich eine Selbstverständlichkeit, aber es lohnt sich immer noch, es hinauszuwerfen.

Anmerkung: Wenn Sie mit jedem Dateityp vertraut sind, stellen Sie sicher, dass Sie zuerst die .mp4-Version auflisten. Dies ist aus Pilgrims HTML5-Videobeschreibung:

iPads mit iOS 3.x hatten einen Fehler, der sie daran hinderte, etwas anderes als die erste aufgeführte Videoquelle zu bemerken. iOS 4 (ein kostenloses Upgrade für alle iPads) behebt diesen Fehler. Wenn Sie Videos für iPad-Besitzer bereitstellen möchten, die noch kein Upgrade auf iOS 4 durchgeführt haben, müssen Sie zuerst Ihre MP4-Datei auflisten, gefolgt von den kostenlosen Videoformaten.

1
avoision

Stellen Sie sicher, dass Ihr Video mit dem richtigen Content-type- Header geliefert wird

Es sollte Content-Type:video/mp4 für mp4/m4v sein.

0
Gustav

Ich hatte das gleiche Problem mit IE9, das ein rotes Kreuz zeigte, als ich versuchte, das MP4-Video anzuzeigen. Die einfache Verwendung von ffmpeg (wie von Michas vorgeschlagen) löste das Problem für mich.

<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>

Die ffmpeg-Parameter: (Ich habe .ogv von ffmpeg2theora als Eingabedatei verwendet):

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

Meine ffmpeg-Version:

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
0
JonBaron

Nachdem ich die meisten der obigen Vorschläge ausprobiert habe, funktionierte für mich Folgendes, um WMV-Dateien auf einem Windows7-64-Computer in kleine MP4-, WebM- und OGG-Dateien zu konvertieren:

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

alt\ffmpeg ist die Version SVN-r5570

64bit\ffmpeg ist die Version N-38292-ga4c22e3 vom 27.02.12 14:55:47

32bit\ffmpeg ist die Version N-39267-g4082198 vom 25.03.12 20:25:08

(Nur die 64-Bit-Version würde das wmv lesen, also habe ich es verwendet, um mpg als allgemeines Format zu konvertieren. Nur das alte ffmpeg würde ein mp4 erstellen.)

0
user1319499