在HTML5和HLS中播放实时视频
在HTML5和HLS中播放实时视频
提问于 2018-03-20 09:55:58
我想观看来自在我的https网站上的这个http站点。直播视频。
在我的模板中添加了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');回答 2
Stack Overflow用户
发布于 2018-03-20 11:17:58
正确的工作代码：
<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>但是浏览器会阻止它，因为如果我的页面是通过https加载的，则是the content must be served over https。
Stack Overflow用户
发布于 2018-03-20 10:00:13
当您试图访问Hls而不导入它时，您将得到此错误。请使用以下方式导入
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>在HLS文档的入门部分可以看到一个更详细的示例
另外，添加正确的引用。
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49381081
复制相关文章
相似问题
腾讯云开发者
