Vue 播放监控m3u8视频流格式 (Video.js)篇
因业务需求,对接监控显示自己的系统中。前端框架vue监控返回格式m3u8,视频流格式h264,如果视频流格式是h265的建议先把流转换h264。4.本篇文章讲解video.js插件播放m3u81.npm安装和引入npm install --save video.jsnpm install --save videojs-contrib-hls2引入对应css我们需要引入videojs的css文件,例
·
- 因业务需求,对接监控显示自己的系统中。
- 前端框架vue
- 监控返回格式m3u8,视频流格式h264,如果视频流格式是h265的建议先把流转换h264。
4.本篇文章讲解video.js插件播放m3u8
1. npm安装和引入
npm install --save video.js
npm install --save videojs-contrib-hls
2引入对应css
我们需要引入videojs的css文件,例如在main.js中引入
import 'video.js/dist/video-js.css'
3 接着,我们在需要播放视频的页面引入js对象
import videojs from "video.js";
import "videojs-contrib-hls";
vue 页面使用
<video
id="myvideo"
class="video-js vjs-default-skin"
controls
preload="auto"
width="800px"
>
<source src="http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" type="application/x-mpegURL" />
</video>
mounted() {
this.getVideo();
},
methods:{
getVideo() {
videojs(
"myvideo",
{
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
function() {
this.play();
}
);
}
}
4动态改变标签地址
<button @click="setVideo()">点击切换到CCTV3</button>
setVideo() {
var myPlayer = videojs("myvideo");
myPlayer.src([
{
type: "application/x-mpegURL",
src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道
}
]);
myPlayer.play();
}
5 注意事项
如果在页面dom中没有找到对应dom 就会报错 Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs) 的解决办法。
解决办法,等确认dom存在再执行
1.,延迟加载,避免查找dom为空
setTimeout(() => {
that.setVideo();
}, 500);
2. 页面渲染完后执行
this.$nextTick(){
that.setVideo();
}
最终就OK了。
更多推荐
已为社区贡献11条内容
所有评论(0)