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

文章讲述了在微信小程序中如何使用WXML和JS实现视频的滚动播放、暂停/播放切换以及自动定位到上次播放位置的功能,重点介绍了`video`组件和时间更新处理的代码实现。

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);
 
    // 如果当前这个视频已经播放过,就跳转到指定的播放位置
    l
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值