M3u8 Dateien mit HTML Video Tag abspielen

Ich versuche, mit HTTP Live Streaming (HLS), video-stream zu meinem Rechner und meinem iPhone. Nach dem durchlesen des Apple HTTP Live Streaming Overview' sowie 'Best Practices für das Erstellen und Bereitstellen von HTTP-Live-Streaming Media für das iPhone und iPad', bin ich ein wenig stecken.

Nahm ich meine source-Datei (mkv) und verwendet ffmpeg zum encodieren der Datei die MPEG-TS-format und Apple-empfohlenen Einstellungen und eine Baseline 3.0 profile:

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 sorgen gibt. Habe ich eine pre-kompilierten Segmentierung tool segment der video-und bauen Sie ein .m3u8 playlist. Die resultierende Datei sah so 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

Habe ich überprüft, dass gegen einige Beispiel-Playlist-Dateien für die Verwendung mit HTTP-Live-Streamingund ich sehe keine Probleme. Ich habe auch versucht zu spielen .m3u8-Datei in VLC und es funktioniert wie ein Charme.

Erstellte ich eine HTML-Seite um die Datei zu spielen:

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

Seite und dieser funktioniert nicht in Chrome, Safari auf meinem iPhone. Das video-tag in html5 Beispiele auf w3schools funktionieren auf meinem computer, und die offizielle Apple-überblick erwähnt, gibt ein HTML-Beispiel sehr ähnlich zu meiner Seite. Trotzdem, mein video-player ist komplett nicht mehr reagiert, wenn ich Besuch meine eigenen .m3u8 Seite.

InformationsquelleAutor der Frage drucifer | 2013-11-05

29

Vielleicht ein wenig spät mit der Antwort, aber Sie brauchen, um die Versorgung der MIME-type-Attribut im video-tag: type="application/x-mpegURL". Das video-tag, die ich für eine 16:9-stream sieht wie folgt aus.
```
<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>
```
InformationsquelleAutor der Antwort ben.bourdin
4

Hinzufügen zu ben.bourdin beantworten, können Sie zumindest in jedem HTML-basierte Anwendung, überprüfen Sie, ob der browser unterstützt die HLS in Ihrer video-element:

Können davon ausgehen, dass Ihre video-element-ID ist "myVideo", dann mit Hilfe von javascript können Sie die "canPlayType" - Funktion (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:

"" wenn es keine Unterstützung für den angegebenen audio - /video-Typ

"vielleicht", wenn der browser unterstützt das angegebene audio - /video-Typ

"wahrscheinlich", wenn es die meisten wahrscheinlich unterstützt die angegebene audio - /video-Typ (Sie können verwenden Sie nur diesen Wert in die Validierung mehr sicher, daß Ihr browser unterstützt die angegebene Art)

Hoffe, dies hilft 🙂

Beste Grüße!

InformationsquelleAutor der Antwort MaxTomasello
4
```
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body> 
```
Stream HLS oder m3u8-Dateien mit obigen code.
es arbeitet mit edge-browser, chrome,opera mini (mobile browser) (funktioniert nicht mit pc chrome)

Spielen auf allen browser mit flash-basierten media-player.
media player unterstützen alle browser

InformationsquelleAutor der Antwort Rakyesh Kadadas

Verwenden Flowplayer:

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css">
    <style>

   </style>
   <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script>
  <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
  <script>
  flowplayer(function (api) {
    api.on("load", function (e, api, video) {
      $("#vinfo").text(api.engine.engineName + " engine playing " + video.type);
    }); });
  </script>

<div class="flowplayer fixed-controls no-toggle no-time play-button obj"
      style="    width: 85.5%;
    height: 80%;
    margin-left: 7.2%;
    margin-top: 6%;
    z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625"  data-logo="">
      <video autoplay="true" stretch="true">

         <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8">
      </video>   
   </div>

Verschiedene Methoden sind verfügbar in flowplayer.org website.

InformationsquelleAutor der Antwort Jithu Wilson C

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.