data(){
return{
flvPlayer:null,//flv对象
}
},
methods:{
//视频播放
videoPlay() {
var self = this;
//调用视频地址的接口,返回flv的播放地址
videoPlayRequest({ devId: self.devId }).then((res) => {
var video = self.$refs.videoRef;
self.flvPlayer = flvjs.createPlayer(
{
type: 'flv',
isLive: true,
url: res.FLV
},
{
enableStashBuffer: false
}
);
self.flvPlayer.attachMediaElement(video);
self.flvPlayer.load();
setTimeout(function () {
self.flvPlayer.play();
}, 2000);
});
},
//视频关闭
videoPause() {
var self = this;
//关闭当前视频流
if(self.flvPlayer){
self.flvPlayer.pause();
self.flvPlayer.unload();
self.flvPlayer.detachMediaElement();
self.flvPlayer.destroy();
self.flvPlayer=null;
//调用关闭流的接口
videoStopRequest({ deviceId: self.devId }).then((res) => {});
}
}
}
flv.js插件播放flv格式的视频实例(vue)
最新推荐文章于 2024-07-01 15:08:28 发布
这段代码展示了如何使用FLV.js库在Vue.js应用中实现实时视频播放和关闭功能。`videoPlay`方法创建并加载视频播放器,而`videoPause`方法则负责暂停、卸载和销毁视频流,同时调用接口关闭视频流。
摘要由CSDN通过智能技术生成