Abspielen von m3u8-Dateien mit HTML-Video-Tag

Question

Mehr

Quelle Nicht AMP-Version Bearbeiten

Abspielen 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 Apple 'HTTP Live Streaming Overview' sowie 'Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad' durchgelesen habe, komme ich nicht weiter.

Ich habe meine Quelldatei (eine mkv) genommen und ffmpeg verwendet, um die Datei im MPEG-TS-Format mit den von Apple empfohlenen Einstellungen und einem Baseline 3.0-Profil zu kodieren:

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. Ich habe ein vorkompiliertes Segmentierungswerkzeug verwendet, um das Video zu segmentieren und eine .m3u8-Wiedergabeliste zu erstellen. Die resultierende Datei sah wie folgt 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 mit einigen Beispiel-Wiedergabelistendateien zur Verwendung mit HTTP-Live-Streaming verglichen, und ich sehe keine Probleme. Ich habe auch versucht, die .m3u8-Datei in VLC abzuspielen, und es funktioniert einwandfrei.

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>

Und diese Seite funktioniert weder in Chrome noch in Safari noch auf meinem iPhone. Die html5-Video-Tag-Beispiele auf 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. Dennoch reagiert mein Videoplayer überhaupt nicht, wenn ich meine eigene .m3u8-Seite aufrufe.

Majid

Bearbeitete Frage 20. Februar 2017 в 7:36

Programmierung

streaming html http-live-streaming html5-video m3u8

5. November 2013 в 5:22

21 Aufrufe

ben.bourdin · Answer 1 · 2014-04-22T16:50:58+00:00

ben.bourdin

Quelle Nicht AMP-Version Bearbeiten

Die Antwort kommt vielleicht ein bisschen spät, aber Sie müssen das MIME-Typ-Attribut im Video-Tag angeben: type="application/x-mpegURL". Der Video-Tag, den ich für einen 16:9-Stream verwende, sieht wie folgt aus.

<amp-video width="352" height="198" controls>

</amp-video>

37

0

Kommentare (2)

Rakyesh Kadadas · Answer 2 · 2017-01-03T09:53:35+00:00

Rakyesh Kadadas

Quelle Nicht AMP-Version Bearbeiten



    <amp-video width="600" height="400" controls>

    </amp-video>

Streamen Sie HLS- oder m3u8-Dateien mit obigem Code. Es funktioniert für Desktop: ms edge browser (funktioniert nicht mit desktop chrome) und mobil: Chrome, Opera Mini Browser.

Zur Wiedergabe in allen Browsern verwenden Sie einen Flash-basierten Media Player. Media Player zur Unterstützung aller Browser

Rakyesh Kadadas

Bearbeitete Antwort 11. Juni 2019 в 4:21

6

0

Kommentare (2)

MaxTomasello · Answer 3 · 2016-08-11T14:19:25+00:00

Ergänzend zur Antwort von ben.bourdin können Sie zumindest in jeder HTML-basierten Anwendung prüfen, ob der Browser HLS in seinem Videoelement unterstützt:

Nehmen wir an, die ID Ihres Videoelements lautet "myVideo", dann können Sie über Javascript die Funktion "canPlayType" verwenden (http://www.w3schools.com/tags/av_met_canplaytype.asp)

var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
    //Actions like playing the .m3u8 content
}
else{
    //Actions like playing another video type
}

Die canPlayType Funktion, gibt zurück:

"" wenn es keine Unterstützung für den angegebenen Audio/Video-Typ gibt

"maybe" wenn der Browser den angegebenen Audio-/Videotyp möglicherweise unterstützt

"wahrscheinlich" wenn der angegebene Audio-/Videotyp höchstwahrscheinlich unterstützt wird (Sie können nur diesen Wert in der Validierung verwenden, um sicherer zu sein, dass Ihr Browser den angegebenen Typ unterstützt)

Hoffentlich hilft das :)

Mit freundlichen Grüßen!