使用 HTML5 和 HLS 流式传输实时视频

Question

我希望从 此 http 网站在我的 https 网站中流式传输实时视频。

在我的模板中添加了 hls.min.js 的引用。复制粘贴他们的代码：

<video id="video" width="320" height="240" controls autoplay 
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
  video.play();
});
}
</script>

进入我的模板，但播放器没有开始播放。 浏览器控制台显示：

未捕获的引用错误：Hls 未定义

参考误差到底在哪里？在这里？

hls.loadSource('/hls/metsis.m3u8');

Answer 1

正确的工作代码：

 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 <video id="video" width="100%" height="380" controls autoplay 
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://tv.eenet.ee/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
  video.play();
});
}
</script>

但是浏览器会阻止它，因为

the content must be served over https

如果我的页面是通过 https 加载的。

Answer 2

当您尝试访问 Hls 而不导入它时，您会收到此错误。请使用以下方式导入

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

更详细的示例可以在 HLS 文档

的入门部分查看

另外，添加正确的参考文献

hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');

Answer 3

您需要一个 crossorigin 属性来处理不安全的网址...

crossOrigin="anonymous"

还有一个 muted 属性，以便自动播放功能......

muted

对于 HLS 标准/兼容性，我还会添加一个 type 属性...

type="application/x-mpegURL"

将所有这些放在一起，HTML 播放器就变成了......

<video id="video" type="application/x-mpegURL" crossOrigin="anonymous" class="videoCentered" width="100%" height="380" muted controls autoplay></video>