<template>
<view class="container">
<video id="video" ref="videoRef" :src="videoSrc" @timeupdate="onVideoTimeUpdate" :autoplay="true" controls @loadeddata="onVideoLoaded"></video>
</view>
</template>
<script>
export default {
data() {
return {
videoSrc: 'https://yzp24.act315.com/static/image/video.mp4', // 初始视频文件路径
chunkIndexArray: [2, 4, 8], // 切片时间点(秒)
loadingNewVideo: false
}
},
mounted() {
let cd = this.$refs.videoRef; // 获取视频元素引用
},
methods: {
onVideoTimeUpdate(event) {
console.log(event,'123')
if (!this.video || this.loadingNewVideo) {
return; // 如果视频未准备就绪,或正在加载新视频,则不执行切片逻辑
}
const currentTime = Math.floor(this.video.currentTime);
const nextChunkIndex = this.getNextChunkIndex(currentTime);
if (nextChunkIndex !== -1) {
const nextChunkSrc = `chunk_${nextChunkIndex}.m4s`;
this.loadingNewVideo = true;
this.video.src = nextChunkSrc; // 切换视频源
}
},
getNextChunkIndex(currentTime) {
for (let i = 0; i < this.chunkIndexArray.length; i++) {
if (currentTime < this.chunkIndexArray[i]) {
return i + 1; // 返回下一个切片的索引(从1开始)
}
}
return -1; // 没有下一个切片
},
onVideoLoaded() {
this.loadingNewVideo = false;
this.video.play(); // 加载完成后播放视频
}
}
}
</script>
<style lang="scss">
.container {
width: 100%;
.video {
height: 500rpx;
border: 1px solid #ccc;
}
}
</style>
0 个回复