import flvjs from 'flv.js';
安装flv
<video style="width:100%;height:100%;" ref="videoHWRef" ></video>
// src 华为rtsp流 rtsp://admin:Huaweivideo@10.10.8.151:554/xxx/trackID=1
// url 需要后端提供视频源地址
playVideo() {
if (flvjs.isSupported() && src) {
let video = this.$refs['videoHWRef']
if (video) {
this.flvPlayer = flvjs.createPlayer(
{
type: "flv",
isLive: true,
hasAudio: false,
url: `${baseUrl}/iot/live/${window.btoa(src)}/live.flv`
},
{
autoCleanupSourceBuffer: true,
enableWorker: false, //不启用分离线程
enableStashBuffer: true, //关闭IO隐藏缓冲区
isLive: true,
lazyLoad: false,
}
);
this.flvPlayer.attachMediaElement(video);
try {
this.flvPlayer.load();
this.flvPlayer.play(); // 他还有很多的函数可以看一下flv.js的官方文档
// this.listenVideo(index);
} catch (error) {
console.log(error);
};
}
}
}
}
beforeDestroy() {
if (this.flvPlayer) {
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
}
}
可播放