web-dev-qa-db-de.com

Wie kann ich ein m3u8-Video (Datei) mit dem HTML5-Element <video> abspielen?

Ich bin auf diesen stackoverflow-Link gestoßen, der über das Abspielen einer m3u8-Datei spricht: Wiedergabe von m3u8-Dateien mit HTML-Video-Tag

Ich habe versucht, etwas Ähnliches zu tun, um den Videolink in der m3u8-Datei wie auf phpfiddle abzuspielen: 

    echo '<video width="352" height="198" controls>
<source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"></video>';

Aber es funktioniert nicht. Es scheint das Videoelement zu zeigen, aber das Video wird nicht darin geladen. Ist es möglich, m3u8-Dateien auf diese Weise abzuspielen? Die m3u8-Datei, die ich abspielen möchte, befindet sich im "https://www.udemy.com/Excel-tutorial/".

Danke für jede Hilfe. 

phphtml5html5-video
6
vjks

Verwenden Sie das JavaScript-Paket HLS-Client hls.js unter github . Wird von vielen etablierten Organisationen verwendet. Funktioniert auf allen Browsern.

Eine kurze Beispielseite:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <video id="video" controls></video>
    <script>
    if(Hls.isSupported())
    {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('playlist.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function()
        {
            video.play();
        });
    }
    else if (video.canPlayType('application/vnd.Apple.mpegurl'))
    {
        video.src = 'playlist.m3u8';
        video.addEventListener('canplay',function()
        {
            video.play();
        });
    }
    </script>
  </body>
</html>

Ersetzen Sie "playlist.m3u8" durch Ihre Playlist.

9
Jahmic

Eine m3u8-Datei ist ein HLS-Manifest, das ein adaptives Streaming ermöglicht. Um einen HLS-Stream abzuspielen, müssen Sie einen HLS-Videoplayer finden, um geräteübergreifend in jedem Browser zu spielen. Sie können sogar selbst eines erstellen, zum Beispiel mit JavaScript.

Alternativ können Sie google kostenlose HLS-Player (häufig ohne Funktionen) oder einen kommerziellen HLS-Player wie THEOplayer verwenden.

1
Thijs Lowette