vue中使用video标签实现对m3u8流格式视频的播放

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在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

以上是 vue中使用video标签实现对m3u8流格式视频的播放 的全部内容， 来源链接： utcz.com/z/377013.html

回到顶部