vue项目中使用flv.js实时播放断流重连关闭断流开发心得

第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长

后来项目更新采用的是EasyPlayer插件
文章地址: VUE项目中优雅使用EasyPlayer

后端是流媒体服务
**

用的是宇视的摄像头(对于前端就是拼接的地址不同)

简单介绍下:
Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。
开源地址: https://github.com/Bilibili/flv.js/

先看一下页面效果:

功能:点击右边菜单出现实时监控画面,页面有四个窗体,每个窗体播放不同的视频,当四个窗体都在播放时,点击下一个会依次替换每个窗体,随机点四个页面会出现对应的实时视频

开发问题1:离开页面视频会暂停(就没有实时性)
开发问题2:页面会疯狂报错(不影响功能,但是浏览器受不了)
开发问题3:怎么当四个窗体都在播放时,点击下一个会依次替换每个窗体
开发问题4:怎么断掉上一个视频的推流(视频会卡顿)
开发问题5:怎么断开重新连接

关于报错

Uncaught (in promise): The play() request was interrupted by a call to pause().

在调用 video的 play() 方法之后就立即被之后一次调用 pause() 方法中断了。错误提示中明确指出了调用 play 方法是返回了一个Promise对象。那么上述的问题就有了解决方法：在 play() 执行成功后，播放视频，然后执行后续操作。

上才艺:

下载包 cnpm install --save flv.js

 页面结构

   <div class="video"><videov-for="i in 4":id="'videoElement' + i"controlsautoplaymuted></video></div>

js部分

data() {return {flvPlayer: null,url: "",count: 1, // 当前点击标识flvPlayerList: []};},

创建实例

  createVideo() {if (flvjs.isSupported()) {var videoElement = document.getElementById("videoElement" + this.count);this.flvPlayer = flvjs.createPlayer({type: "flv",isLive: true,hasAudio: false,url: this.url},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});this.flvPlayer.attachMediaElement(videoElement);// this.flvPlayer.load();if (this.url !== "" && this.url !== null) {this.flvPlayer.load();this.flvPlayer.play();}}//定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用setInterval(function() {// console.log(videoElement.buffered,"idididid");if (videoElement.buffered.length > 0) {const end = videoElement.buffered.end(0); // 视频结尾时间const current = videoElement.currentTime; //  视频当前时间const diff = end - current; // 相差时间// console.log(diff);const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度let playbackRate = 1.0; // 播放速度if (diff > diffCritical) {//  this.flvPlayer.load();// console.log("相差超过4秒，进行跳转");videoElement.currentTime = end - 1.5;playbackRate = Math.max(1, Math.min(diffCritical, 16));} else if (diff > diffSpeedUp) {// console.log("相差超过1秒，进行加速");playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));}videoElement.playbackRate = playbackRate;if (videoElement.paused) {videoElement.play();}}//  if (videoElement.buffered.length) {//   let end = this.flvPlayer.buffered.end(0);//获取当前buffered值//   let diff = end - this.flvPlayer.currentTime;//获取buffered与currentTime的差值//   if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定//     this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0);//手动跳帧//  }// }}, 1000);this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {// alert("网络波动,正在尝试连接中...");if (this.flvPlayer) {this.reloadVideo(this.flvPlayer);}// errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof// errType是 MediaError时，对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED});this.flvPlayerList.push(this.flvPlayer);},

断开重连机制

   this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {// alert("网络波动,正在尝试连接中...");if (this.flvPlayer) {this.reloadVideo(this.flvPlayer);}// errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof// errType是 MediaError时，对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED});

销毁断流方法

 destoryVideo(flvPlayer) {flvPlayer.pause();flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;},

 reloadVideo(flvPlayer) {this.destoryVideo(flvPlayer);this.createVideo();},

左边菜单点击的方法

clickhandleitem(data, index) {let ip = data.ipAddress;let admin = data.videoname;let password = data.videopas;this.url ="ws://服务地址:端口号/live?url=rtsp://" +admin +":" +password +"@" +ip +"/media/video2/multicast";if (this.flvPlayerList.length > 3) {this.destoryVideo(this.flvPlayerList[0]);this.flvPlayerList.shift();}this.createVideo();this.count > 3 ? (this.count = 1) : this.count++;
},

代码没有封装,如有大佬有更好的办法,请指教

附上页面所有代码

<template><div class="videobox"><div class="videolist"><div class="search"><el-inputclearablev-model="inputvalue"placeholder="请输入内容"size="mini"></el-input><el-button type="primary" size="mini" @click="clicksearch">查询</el-button><ul><liv-for="(item, index) in list"@click="clickhandleitem(item, index)"><i class="el-icon-video-camera-solid"></i>{{ item.devicename + item.deviceAddr }}</li></ul></div></div><div class="video"><videov-for="i in 4":id="'videoElement' + i"controlsautoplaymuted></video></div></div>
</template><script>
import flvjs from "flv.js";
import { mapGetters } from "vuex";import { findAlllist } from "@/api/admin/equipmentlist";
export default {data() {return {flvPlayer: null,inputvalue: "",devicename: "60",url: "",list: [],count: 1, // 当前点击标识flvPlayerList: []};},computed: {...mapGetters(["communityId"])},created() {this.findAlllistApi();},methods: {//查询clicksearch() {this.findAlllistApi();},clickhandleitem(data, index) {let ip = data.ipAddress;let admin = data.videoname;let password = data.videopas;this.url ="ws://服务地址:端口/live?url=rtsp://" +admin +":" +password +"@" +ip +"/media/video2/multicast";if (this.flvPlayerList.length > 3) {this.destoryVideo(this.flvPlayerList[0]);this.flvPlayerList.shift();}this.createVideo();this.count > 3 ? (this.count = 1) : this.count++;},play(flvPlayer) {flvPlayer.play();},createVideo() {if (flvjs.isSupported()) {var videoElement = document.getElementById("videoElement" + this.count);this.flvPlayer = flvjs.createPlayer({type: "flv",isLive: true,hasAudio: false,url: this.url},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});this.flvPlayer.attachMediaElement(videoElement);// this.flvPlayer.load();if (this.url !== "" && this.url !== null) {this.flvPlayer.load();this.flvPlayer.play();}}//定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用setInterval(function() {// console.log(videoElement.buffered,"idididid");if (videoElement.buffered.length > 0) {const end = videoElement.buffered.end(0); // 视频结尾时间const current = videoElement.currentTime; //  视频当前时间const diff = end - current; // 相差时间// console.log(diff);const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度let playbackRate = 1.0; // 播放速度if (diff > diffCritical) {//  this.flvPlayer.load();// console.log("相差超过4秒，进行跳转");videoElement.currentTime = end - 1.5;playbackRate = Math.max(1, Math.min(diffCritical, 16));} else if (diff > diffSpeedUp) {// console.log("相差超过1秒，进行加速");playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));}videoElement.playbackRate = playbackRate;if (videoElement.paused) {videoElement.play();}}//  if (videoElement.buffered.length) {//   let end = this.flvPlayer.buffered.end(0);//获取当前buffered值//   let diff = end - this.flvPlayer.currentTime;//获取buffered与currentTime的差值//   if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定//     this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0);//手动跳帧//  }// }}, 1000);this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {// alert("网络波动,正在尝试连接中...");if (this.flvPlayer) {this.reloadVideo(this.flvPlayer);}// errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof// errType是 MediaError时，对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED});this.flvPlayerList.push(this.flvPlayer);},reloadVideo(flvPlayer) {this.destoryVideo(flvPlayer);this.createVideo();},destoryVideo(flvPlayer) {flvPlayer.pause();flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;},findAlllistApi() {findAlllist(this.communityId, this.inputvalue, this.devicename).then(res => {this.list = res.data;});}}
};
</script><style lang="scss" scoped>
.videobox {display: flex;/* justify-content: space-between; *//* flex-wrap: wrap; */
}
.videolist {width: 550px;height: 906px;display: flex;.search {margin-left: 50px;.el-input {width: 300px;margin-top: 20px;}ul {width: 100%;height: 777px;overflow: hidden;overflow-y: auto;list-style: none;li {padding: 7px;margin: 1px 0;text-decoration: none;white-space: nowrap;font-size: 14px;cursor: pointer;&:hover {background: #fff;}.el-icon-video-camera-solid {font-size: 16px;color: #67c23a;}}}}
}
.video {display: flex;flex-wrap: wrap;width: 100%;justify-content: space-evenly;video {object-fit: contain;width: 600px;height: 390px;}
}
</style>