![](https://i-blog.csdnimg.cn/blog_migrate/271da757237a1b067189847418a3341a.png)
<template>
<div class="borrad congye" v-if="mclzData.length > 0">
<div v-for="(item, index) in mclzData" :key="item.id">
<div class="vidioArea" :id="`my-div${index}`" style="min-height:200px;background: #000;">
<video :id="`my-video${index}`" class="video-js vjs-default-skin videos" muted>
<source :ref="`my-source${index}`" src="" type="application/x-mpegURL" />
</video>
</div>
<div class="shua">
<span>{{ item.title }}</span>
<i class="el-icon-refresh" ref="icon" :class="{ rotated: index === activeIndex }" style="font-size: 20px; cursor: pointer;margin: 0 10px;"
@click="shuaxin(item.monitor_id, index)"></i>
</div>
</div>
</div>
<div class="borrad congye" v-else style="line-height: 6;text-align: center;font-weight: bold;">暂无视频~</div>
</template>
<style lang="less" scoped>
.rotated {
animation: rotate-45 1s ease-in-out forwards;
}
@keyframes rotate-45 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
export default {
data() {
return {
activeIndex: -1,
divShow: ['', '', ''],
playerOptions: '',
player: [],
videoList: [],
mclzData: [],
}
},
mounted() {
this.getmclzData()
},
methods: {
resetRotation() {
this.videoList.forEach((icon) => {
icon.rotated = false; // 重置所有图标的旋转状态为false
});
},
shuaxin(monitor_id, i) {
if (this.activeIndex === i) {
this.videoList[i].rotated = true;
this.activeIndex = -1;
} else {
console.log("!=i");
this.resetRotation();
this.activeIndex = i; // 设置当前活动的图标索引
setTimeout(() => {
this.activeIndex = -1;
}, 1000);
}
if (this.player[i] && this.player[i].player_) {
console.log(this.player[i], "this.player[i]");
this.player[i].dispose()
this.$axios.post("/frontend/v1.Wechat/getthisurl", {
monitor_id: monitor_id
}).then((res) => {
if (res.data.code === 1) {
let dom = document.getElementById(`my-div${i}`)
dom.innerHTML =
`<video id="my-video${i}" style="width:100%;min-height:200px" ref="my-video${i}" autoplay class="video-js vjs-default-skin videos" muted >
<source "my-source${i}" id='my-source${i}' src="${res.data.data.data}" type="application/x-mpegURL" />
</video>`
this.player[i] = videojs(
`my-video${i}`,
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
hls: {
withCredentials: true,
},
controlBar: {
fullscreenToggle: true, //显示全屏按钮,默认为true
pictureInPictureToggle: false, //隐藏画中画按钮,默认为true
volumePanel: false, //隐藏声音面板
},
},
function () {
this.play();
}
);
}
});
} else {
this.setVideo(monitor_id, i)
}
},
goVideo(data) {
const that = this;
this.videoList = data;
if (data.length == 0) {
this.$message({
showClose: true,
message: "暂无视频~",
});
} else {
this.videoisShow = true;
for (let i = 0; i < this.videoList.length; i++) {
this.setVideo(this.videoList[i].monitor_id, i)
}
}
},
setVideo(code, i) {
this.$axios.post("/frontend/v1.Wechat/getthisurl", {
monitor_id: code
}).then((res) => {
if (res.data.data.code === 200) {
let dom = document.getElementById(`my-div${i}`)
dom.innerHTML = `<video id="my-video${i}" style="width:100%;min-height:200px" ref="my-video${i}" autoplay class="video-js vjs-default-skin videos" muted > <source
ref="my-source${i}" id='my-source${i}'
src="${res.data.data.data}"
type="application/x-mpegURL"
/>
</video>`
this.player[i] = videojs(
`my-video${i}`,
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
hls: {
withCredentials: true,
},
controlBar: {
fullscreenToggle: true, //显示全屏按钮,默认为true
pictureInPictureToggle: false, //隐藏画中画按钮,默认为true
volumePanel: false, //隐藏声音面板
//currentTimeDisplay: true,//显示当前播放时间
//timeDivider: true,//显示时间分割线
//durationDisplay: true,//显示总时间
//remainingTimeDisplay: false,//隐藏剩余时间,
},
},
function () {
this.play();
}
);
} else {
this.$set(this.divShow, index, res.data.data.msg)
console.log(this.divShow, "this.divShow");
}
});
},
getVideo(i) {
console.log(videojs);
// this.$nextTick(() => {
let res = videojs(
`my-video${i}`,
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
hls: {
withCredentials: true,
},
controlBar: {
fullscreenToggle: true,//显示全屏按钮,默认为true
pictureInPictureToggle: false,//隐藏画中画按钮,默认为true
volumePanel: false,//隐藏声音面板
//currentTimeDisplay: true,//显示当前播放时间
//timeDivider: true,//显示时间分割线
//durationDisplay: true,//显示总时间
//remainingTimeDisplay: false,//隐藏剩余时间,
}
},
function () {
this.play();
}
);
this.player.push(res);
// })
},
// 获取列表
getmclzData() {
this.$axios.post("/frontend/v1.Wechat/mastermonitor", {
id: this.id
}).then((res) => {
if (res.data.code === 1) {
this.mclzData = res.data.data.data
this.goVideo(this.mclzData)
}
});
},
videoClose() {
this.player.forEach((item) => item.dispose());
this.player = [];
this.videoList = [];
},
},
beforeDestroy() {
this.videoClose();
},
};
</script>