php 如何使用 HTML5 <video> 元素播放 m3u8（文件）视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41014197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I play a m3u8 (file) video using the HTML5 <video> element?
提问by vjks
I came across this stackoverflow link that talks about playing a m3u8 file: Playing m3u8 Files with HTML Video Tag
我遇到了这个关于播放 m3u8 文件的 stackoverflow 链接：Playing m3u8 Files with HTML Video Tag
I've tried doing something similar to play the video link in the m3u8 file like on phpfiddle:
我试过做一些类似于在 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>';
But it's not working. It seems to show the video element but the video doesn't get loaded in it. Is it possible to play m3u8 files this way? The m3u8 file that I want to play is inside the "https://www.udemy.com/excel-tutorial/
但它不起作用。它似乎显示了视频元素，但视频没有加载到其中。可以这样播放 m3u8 文件吗？我要播放的 m3u8 文件在“https://www.udemy.com/excel-tutorial/
Thanks for any help.
谢谢你的帮助。
回答by Jahmic
Use the JavaScript HLS client hls.js package found on github. Used by many established organizations. Works on all browsers.
使用在github 上找到的 JavaScript HLS 客户端 hls.js 包。被许多成熟的组织使用。适用于所有浏览器。
A quick example page:
一个快速示例页面：
<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>
Replace 'playlist.m3u8' with your playlist.
将“playlist.m3u8”替换为您的播放列表。
回答by Thijs Lowette
A m3u8 file is a HLS manifest, which enables adaptive streaming. To play a HLS stream, you'll need to find a HLS video player in order to play cross-device on every browser. You can even build one yourself, for example with JavaScript.
m3u8 文件是一个 HLS 清单，它支持自适应流。要播放 HLS 流，您需要找到一个 HLS 视频播放器，以便在每个浏览器上跨设备播放。您甚至可以自己构建一个，例如使用 JavaScript。
Alternatively, you can google free HLS players(often lacking in features), or use a commercial HLS player like THEOplayer.
或者，您可以谷歌免费 HLS 播放器（通常缺乏功能），或使用像THEOplayer这样的商业 HLS 播放器。
