组件实现?
<template>
<div class="video-bk">
<video v-for="(item,index) in videoList"
:ref="item.index"
:key="item.index"
:class="{'show':item.index == videoIndex, 'hide': item.index != videoIndex}"
:src="item.url"
autoplay="false"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
style="object-fit:fill"
@canplay="canplay($event,item)"
@ended="ended($event,item)" />
</div>
</template>
<script>
export default {
name: "VideoListPlay",
props: {
nextIndex: {
type: String,
default: "",
},
loop: {
type: Boolean,
default: true,
},
},
data() {
return {
// percentage: 0,
videoNum: 0,
// colors: [
// { color: "#f56c6c", percentage: 20 },
// { color: "#e6a23c", percentage: 40 },
// { color: "#5cb87a", percentage: 60 },
// { color: "#1989fa", percentage: 80 },
// { color: "#6f7ad3", percentage: 100 },
// ],
videoIndex: "1_1",
overVideoList: [],
videoList: [
{
url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-22/d560d1ac-3f3b-4e57-9e58-8c855578683e.mp4",
describe: "默认视频1",
index: "0_1" ,
},
{
url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/4271f726-16a2-4aa2-a34d-f2f8816fd1aa.mp4",
describe: "默认视频2",
index: "2_1",
},
{
url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/5f6db006-4166-4497-8795-578f212d4b3c.mp4",
describe: "默认视频3",
index: "3_1",
},
{
url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/ee7feb40-7f1b-4939-8bfe-9515276e8f02.mp4",
describe: "默认视频4",
index: "4_1",
},
{
url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/eec01134-8c73-4112-a7ef-e394492d3a46.mp4",
describe: "默认视频5",
index: "5_1",
},
],
myvideo: null,
url: "",
};
},
watch: {
nextIndex: {
handler(val) {
if (val) {
this.videoIndex = val.split("_time")[0];
if (this.overVideoList.includes(this.videoIndex)) {
this.$nextTick(() => {
this.$refs[this.videoIndex][0].pause();
this.$refs[this.videoIndex][0].play();
});
} else {
this.$nextTick(() => {
this.overVideoList.push(this.videoIndex);
this.$refs[this.videoIndex][0].play();
});
}
}
},
immediate: true,
},
},
created() {
this.percentage = 0;
this.videoNum = 0;
},
mounted() {
console.log("初始化");
// setTimeout(() => {
// this.$refs["1_1"][0].play();
// }, 1000);
},
destroyed() {},
methods: {
ended(e, item) {
const that = this;
this.$emit("ended");
console.log(item.describe + "播放完成");
},
canplay(e, item) {
++this.videoNum;
// this.percentage = (this.videoNum / this.videoList.length) * 100;
// this.$emit("canplay");
if (this.videoIndex <= this.videoList.length) {
e.target.pause();
}
console.log(item.describe + "预加载完成");
if (this.videoNum == this.videoList.length) {
this.$refs[this.videoIndex][0].play();
}
},
// 视频播放时间
updateTime() {
const s = this.$refs.video.currentTime; // 获取当前播放时间
console.log(s + "=======获取当前播放时间");
},
pause() {
console.log("暂停");
this.myvideo.pause();
},
// 视频播放
play() {},
},
};
</script>
<style lang="scss" scoped>
.video-bk {
position: absolute;
width: 1920px;
height: 1080px;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background:url(./img/bg.png) no-repeat center;
block-size: 1920px 1080px;
.progress-show {
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
video {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1920px;
height: 1080px;
&.show {
visibility: visible;
}
&.hide {
visibility: hidden;
}
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
z-index: ($i + 1);
}
}
}
}
</style>
demo 调用?
<template>
<div class="app-container">
<VideoListPlay @ended="ended"
:nextIndex='process' />
</div>
</template>
<script>
import VideoListPlay from "./videoListPlay.vue";
export default {
name: "VideoTest",
components: { VideoListPlay },
data() {
return {
process: "1_1",
};
},
created() {},
methods: {
ended() {
++this.playNum;
const list = ["1_1", "2_1", "3_1", "4_1", "5_1"];
const random = Math.floor(Math.random() * 5);
this.process =
list[random] + "_time=" + Math.floor(Math.random() * 1000000);
},
},
};
</script>
<style lang="scss" scoped>
img {
width: 100%;
}
</style>
