vue 视频播放(flv格式)
需求:播放监控视频,并点击切换正在播放的视频,并可以切换成九宫格四宫格
<div class="div3">
<!-- <div>
<div class="four" @click="changeGrid(4)" style="cur">
四宫格
</div>
<div class="four" @click="changeGrid(9)">九宫格</div>
</div> -->
<div
:class="[
'child',
currentVideoNum == 4 ? 'div3-child' : 'div3-child2',
]"
>
<div
:style="
currentVideoNum == 4 ? { height: '390px' } : { height: '250px' }
"
v-for="(item, index) in videoData"
:key="item.channelName + index"
@click="changeVideo(item, index)"
>
<video
:id="'video' + index"
controls
:autoplay="true"
:muted="true"
class="videoClass"
></video>
</div>
</div>
<div style="height:40px;position:absolute;bottom:10px">
<i
class="el-icon-menu"
@click="changeGrid(4)"
style="font-size:40px"
>
</i>
<i
class="el-icon-s-grid"
@click="changeGrid(9)"
style="font-size:40px"
></i>
</div>
</div>
//videoData 播放的视频数组,默认值为空
//切换导航条时注销正在播放的视频,不然会有属于谷歌浏览器会有的错误信息,导致视频无法播放
beforeDestroy() {
this.destroyVideo();
},
//四宫格/九宫格切换
changeGrid(number) {
this.destroyVideo();
this.videoData = [];
this.currentVideoNum = number;
let data = this.list;
this.end =
data.length < this.currentVideoNum ? data.length : this.currentVideoNum;
if (data && data.length) {
this.ids = data.slice(0, this.end);
this.getInitData("isChangeVideo");
}
},
//视频销毁
destroyVideo(isChangeVideo) {
if (isChangeVideo) {
//点击方式切换销毁
let flvPlayer = `${"flvPlayer" + this.videoIndex}`;
if (this[flvPlayer] != null) {
this[flvPlayer].destroy();
}
} else {
//初始化时默认销毁
for (let index = 0; index < this.currentVideoNum; index++) {
let flvPlayer = `${"flvPlayer" + index}`;
if (this[flvPlayer] != null) {
this[flvPlayer].destroy();
}
}
}
},
//将要替换的视频序号
changeVideo(item, index) {
let videoElement = document.getElementById("video" + index);
//选中的视频加红色框框
videoElement.style.border = "red solid 1px";
this.videoIndex = index;
},
getInitData(flag) {
videoMenu().then((res) => {
this.treeData = res.data || [];
if (!flag) {
this.initVideo(this.treeData);
let online = this.list.filter((item) => item.status == 0);
this.onLine = online.length;
}
//循环id,查找出对应的视频,并放到数组里
//这边遇到过一个问题:由于异步操作,始终获取不到this.videoData中的值, setTimeout都试了都不可以,最后使用callback回调,播放视频
this.ids.forEach((item) => {
this.getVideoById(item.id, item.channel, "", () => {
if (this.videoData.length == this.end) {
this.videoData.forEach((item, index) => {
this.$nextTick(() => {
this.videoPlay(index, item);
});
});
}
});
});
});
},
//视频播放
videoPlay(index, item) {
let videoElement = document.getElementById("video" + index);
let flvPlayer = `${"flvPlayer" + index}`;
this[flvPlayer] = flvjs.createPlayer({
type: "flv",
isLive: true,
hasAudio: true,
url: Url, // 视频播放的路径
});
this[flvPlayer].attachMediaElement(videoElement);
this[flvPlayer].load();
this[flvPlayer].play();
//if (index == 0) {
//this.flvPlayer0 = flvjs.createPlayer({
// type: "flv",
//isLive: true,
//hasAudio: true,
// url: item.realPlayUrl,
// });
// this.flvPlayer0.attachMediaElement(videoElement);
//this.flvPlayer0.load();
// this.flvPlayer0.play();
}
},
//初始化视频(需求:默认播放四个视频,通过递归筛选出有视频的id)
initVideo(treeData) {
if (treeData && treeData.length) {
for (let index = 0; index < treeData.length; index++) {
if (
treeData[index].tenantProjectVos &&
treeData[index].tenantProjectVos.length
) {
this.initVideo(treeData[index].tenantProjectVos);
} else if (!treeData[index].tenantProjectVos) {
this.list.push(treeData[index]);
if (this.ids.length < this.currentVideoNum) {
if (treeData[index].id) {
this.ids.push(treeData[index]);
}
}
}
}
}
},
//获取播放视频
getVideoById(id, channel, key, callback) {
getVideo({ id, name}).then((res) => {
const { data } = res || [];
if (key == "currentKey") {
this.videoData.splice(this.videoIndex, 1, data[0]);
//解决总是最后一个视频播放不了,因为还没有渲染成功,所以取不到对应的div的id,故而无法播放视频
this.$nextTick(() => {
this.videoPlay(this.videoIndex, data[0]);
});
} else {
if (this.videoData.length <= this.currentVideoNum) {
this.videoData.push(data[0]);
}
}
if (callback) {
callback();
}
});
},
//获取当前行(这里试因为旁边会有一个树形的结构,通过点击树形结构获取id,根据id查询获取播放的视频,播放前销毁当前正在播放的视频)
getCurrentKey(row) {
this.destroyVideo("isChangeVideo");
if (!row.tenantProjectVos) {
this.getVideoById(row.id, row.channel, "currentKey");
}
let videoElement = document.getElementById("video" + this.videoIndex);
videoElement.style.border = "none";
},