web-dev-qa-db-ja.com

HTML5 <video>要素を使用してm3u8（ファイル）ビデオを再生するにはどうすればよいですか？

M3u8ファイルの再生について説明しているこのstackoverflowリンクに出くわしました： HTMLビデオタグを使用したm3u8ファイルの再生

私はphpfiddleのようにm3u8ファイルのビデオリンクを再生するのと同じようなことを試みました：

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

しかし、それは機能していません。ビデオ要素が表示されているようですが、ビデオが読み込まれていません。この方法でm3u8ファイルを再生することは可能ですか？再生したいm3u8ファイルは「https://www.udemy.com/Excel-tutorial/

助けてくれてありがとう。

phphtmlhtml5-video
8
vjks

github にあるJavaScript HLSクライアントhls.jsパッケージを使用します。多くの確立された組織によって使用されます。すべてのブラウザで動作します。

簡単なサンプルページ：

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></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>

「playlist.m3u8」をプレイリストに置き換えます。

9
Jahmic

M3u8ファイルは、アダプティブストリーミングを有効にするHLSマニフェストです。 HLSストリームを再生するには、すべてのブラウザーでクロスデバイスを再生するために、HLSビデオプレーヤーを見つける必要があります。たとえばJavaScriptを使用して、自分で作成することもできます。

または、 google free HLS player （多くの場合、機能が不足している）または THEOplayer のような市販のHLSプレーヤーを使用できます。

1
Thijs Lowette