在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