Bootstrap

微信小程序 - 视频进度控制

wxml页面:

<scroll-view class="videoScroll"scroll-y>
    <view class="videoItem" wx:for="[[videoList}}" wx:key="id">
        <!-- 光靠video组件模式是无法实现暂停上一个,播放下一个的操作功能 -->
        <video 
            src="{{item.data.urlInfo.url}}"
            object-fit="fill" 
            id="{{item.data.vid}}"
            poster="{{item.data.coverUrl}}"
            wx:if="{{videoId === item.data.vid}}"
            bindtimeupdate="bindTimeUpdate"
        />
        <image 
            src="{{item.data.coverUrl}}"
            id="{{item.data.vid}}" 
            bindplay="handlePlay"
            wx:else
        />
    </view>
</scroll-view>

js页面:

handlePlay(e){
    this.vid = e.currentTarget.id;
    this.setData({
        videoId:this.vid
    });
    this.videoContext = wx.createVideoContext(this.vid);

    // 如果当前这个视频已经播放过,就跳转到指定的播放位置
    let videoObj = this.data.videoUpdateTime.find(
        (item) => item.vid === this.vid    
    );

    if (videoObj){
        setTimeout(()=>{
            // 指定具体播放时间位置
            this.videoContext.seek(videoObj.currentTime);  //单位是s
        },1000)
        setTimeout(()=>{
            this.videoContext.play();
        },1100)
    }
},
handleTimeUpdate(e){
    const { currentTime, duration } = e.detail;
    const { videoId, videoUpdateTime } = this.data;

    let currentVideoObj = {
        vid: videoId,
        currentTime,
    };

    // 数组常见操作函数,find函数返回的是什么?----find函数的返回值是一个对象
    let videoTimeObj = videoUpdateTime.find((item) => item.vid === videoId);
    if(videoTimeObj){  // 如果视频已被播放过,就修改当前播放时间
        // 不为undefined
        // 修改操作
        videoTimeObj.currentTime = currentTime;

        if(videoTimeObj.currentTime === duration){
            // 视频已被播放完毕
            const index = videoUpdateTime.findIndex(item => item.vid === videoId)
            videoUpdateTime.splice(index,1)
        }
    } else {   // 如果当前视频第一次被播放,就添加到播放列表
        // 新增操作
        videoUpdateTime.push(currentVideoObj);
    }
    this.setData({
        videoUpdateTime,
    });
},

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;