z***@163.com
z***@163.com
  • 发布:2024-03-18 14:33
  • 更新:2024-03-18 14:33
  • 阅读:206

uniapp里面视频太大,视频加载缓慢,怎么做分割加载

分类:uni-app

<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>

2024-03-18 14:33 负责人:无 分享
已邀请:

要回复问题请先登录注册