在我的模板中添加了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>
进入我的模板,但播放器没有开始播放。 浏览器控制台说:
未捕获的ReferenceError:未定义Hls
参考错误究竟在哪里?这里吗?
hls.loadSource('/hls/metsis.m3u8');
答案 0 :(得分: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加载的。
答案 1 :(得分:0)
当您尝试访问Hls而不导入它时,您收到此错误。请使用以下方式导入
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
更详细的示例可以在HLS documentation
的“入门”部分看到另外,添加正确的参考
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');