<div class="videos">
<video id="videoOuelet" class="video-flv" controls muted autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<script>
// 视频
changeVideo() {
if (this.flvPlayer) {
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
}
const findUrl = this.videoList.find(i => i.name === this.videoSelect);
if (findUrl) {
this.getVideo(findUrl.url);
}
};
// 视频生成
getVideo(url) {
if (flvjs.isSupported()) {
const videoEl = document.getElementById('videoOuelet');
this.flvPlayer = flvjs.createPlayer(
{
type: 'flv',
isLive: true,
fluid: true,
stashInitialSize: 128, // 减少首桢显示等待时长
url: `${process.env.VUE_APP_CAMERA_VIDEO_ADDRESS}live?url=${url}`,
},
{
enableStashBuffer: false,
fixAudioTimestampGap: false,
isLive: true,
}
);
this.flvPlayer.attachMediaElement(videoEl);
this.flvPlayer.load();
this.flvPlayer.play();
this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, res => {
if (!res.speed) {
// this.flvPlayer.pause();
// this.flvPlayer.unload();
// this.flvPlayer.detachMediaElement();
// this.flvPlayer.destroy();
// this.flvPlayer = null;
}
});
this.flvPlayer.on(flvjs.Events.ERROR, res => {
console.log('error22', res);
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
});
}
};
</script>