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/
助けてくれてありがとう。
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」をプレイリストに置き換えます。
M3u8ファイルは、アダプティブストリーミングを有効にするHLSマニフェストです。 HLSストリームを再生するには、すべてのブラウザーでクロスデバイスを再生するために、HLSビデオプレーヤーを見つける必要があります。たとえばJavaScriptを使用して、自分で作成することもできます。
または、 google free HLS player (多くの場合、機能が不足している)または THEOplayer のような市販のHLSプレーヤーを使用できます。