文章目录
1. Vue+Video.js播放效果图
采用 m3u8
视频流格式播放
2. npm安装和引入
2.1 首先,我们需要在vue工程中安装video.js相关依赖。
npm install --save video.js
npm install --save videojs-contrib-hls
2.2 然后,我们需要引入videojs的css文件,例如在main.js中引入
import 'video.js/dist/video-js.css'
2.3 接着,我们在需要播放视频的页面引入js对象
import videojs from "video.js";
import "videojs-contrib-hls";
3. vue 使用
3.1 指定一个video容器,例如:
<video
id="my-video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="500px"
>
<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
</video>
3.2 最后,我们在mounted节点初始化播放器:
methods:{
getVideo() {
videojs(
"my-video",
{
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
function() {
this.play();
}
);
}
}
mounted() {
this.getVideo();
},
4. 动态设置video视频的src地址
4.1 准备一个点击动态切换的按钮
<button @click="checkVideo()">点击切换到CCTV3</button>
4.2 在methods方法中,通过动态设置src,在重新调用play()
方法
checkVideo() {
var myPlayer = videojs("my-video");
myPlayer.src([
{
type: "application/x-mpegURL",
src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道
}
]);
myPlayer.play();
}
5. Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)
关于报错 Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)
的解决办法。
问题:在我们正常使用的时候都是完全可以使用的,但是当我们有的时候需要把视频放在弹窗el-dialog
里面显示时,就会出现这个报错问题。
原因:页面未找到相应组件
解决:使用setTimeout
延迟加载。
let _that = this;
setTimeout(() => {
_that.getVideo();
}, 300);
6. 附上一些 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