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

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,
    });
},

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值