Wiedergabe von M3U8-Dateien mit HTML-Video-Tag

Question

Nov 05, 2013, 06:22 AM

streaming html5-video m3u8 html http-live-streaming

Wiedergabe von M3U8-Dateien mit HTML-Video-Tag

Ich versuche HTTP Live Streaming (HLS) zu verwenden, um Videos auf meine Computer und mein iPhone zu streamen. Nachdem ich die "HTTP Live Streaming-Übersicht" von Apple sowie die "Best Practices zum Erstellen und Bereitstellen von HTTP Live Streaming-Medien für das iPhone und iPad" gelesen habe, bin ich ein bisschen hängen geblieben.

Ich nahm meine Quelldatei (ein mkv) und verwendete ffmpeg, um die Datei mit dem MPEG-TS-Format und den von Apple empfohlenen Einstellungen und einem Baseline 3.0-Profil zu codieren:

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"

Keine Sorge da. Ich habe avorkompiliertes Segmentierungswerkzeug um das Video zu segmentieren und eine .m3u8 Wiedergabeliste zu erstellen. Die resultierende Datei sah folgendermaßen aus:

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST

Ich habe das gegen einige geprüftBeispiel-Playlistendateien zur Verwendung mit HTTP Live Streamingund ich sehe keine Probleme. Ich habe auch versucht, die .m3u8-Datei in VLC abzuspielen, und es funktioniert wie ein Zauber.

Ich habe eine HTML-Seite erstellt, um die Datei abzuspielen:

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>

Diese Seite funktioniert in Chrome, Safari und auf meinem iPhone nicht. Die Beispiele für HTML5-Videotags in w3schools funktionieren auf meinem Computer einwandfrei, und die oben erwähnte offizielle Apple-Übersicht enthält ein HTML-Beispiel, das meiner Seite sehr ähnlich ist. Mein Videoplayer reagiert jedoch nicht mehr, wenn ich meine eigene .m3u8-Seite besuche.

Zu kommentieren