在html里面是这样的：
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video" autoplay muted></video>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
document.body.addEventListener('mousedown', function () {
video.muted = false;
}, false);
</script>vue项目中也差不多：
这里面直接调用的后台接口获取到数据，动态展示视频
先在项目中用npm把hls.js下载下来，在用到的页面引入
https://www.npmjs.com/package/hls.js/v/canary（hls.js链接，里面有介绍怎么下载）
再来几个从别人那里看到的m3u8流格式的视频地址吧，方便测试：
CCTV-1高清 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV-3高清 http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV-5高清 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8
CCTV-5+高清 http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8
CCTV-6高清 http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
CCTV-8高清 http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8
CHC高清电影 http://ivi.bupt.edu.cn/hls/chchd.m3u8
北京卫视高清 http://ivi.bupt.edu.cn/hls/btv1hd.m3u8
北京文艺高清 http://ivi.bupt.edu.cn/hls/btv2hd.m3u8
北京体育高清 http://ivi.bupt.edu.cn/hls/btv6hd.m3u8
北京纪实高清 http://ivi.bupt.edu.cn/hls/btv11hd.m3u8
湖南卫视高清 http://ivi.bupt.edu.cn/hls/hunanhd.m3u8
浙江卫视高清 http://ivi.bupt.edu.cn/hls/zjhd.m3u8
江苏卫视高清 http://ivi.bupt.edu.cn/hls/jshd.m3u8
东方卫视高清 http://ivi.bupt.edu.cn/hls/dfhd.m3u8
安徽卫视高清 http://ivi.bupt.edu.cn/hls/ahhd.m3u8
黑龙江卫视高清 http://ivi.bupt.edu.cn/hls/hljhd.m3u8
辽宁卫视高清 http://ivi.bupt.edu.cn/hls/lnhd.m3u8
深圳卫视高清 http://ivi.bupt.edu.cn/hls/szhd.m3u8
广东卫视高清 http://ivi.bupt.edu.cn/hls/gdhd.m3u8
天津卫视高清 http://ivi.bupt.edu.cn/hls/tjhd.m3u8
湖北卫视高清 http://ivi.bupt.edu.cn/hls/hbhd.m3u8
山东卫视高清 http://ivi.bupt.edu.cn/hls/sdhd.m3u8
原文链接：https://blog.csdn.net/qq_36410795/article/details/107109514