微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

Posted 2022-01-02 锋少的技术博客

微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

html

 <view class='videoBoxTitle'>视频列表</view>
 <!-- 循环请求到的视频数据，每一个视频都需要有id(id='item.id')-->
    <block wx:for="videoListData" wx:index='index' wx:key='id'>
      <video class="myVideo" id='item.id' autoplay='false' show-center-play-btn="true" controls poster="item.img" src='item.videosrc' bindplay="handlePlay" data-index="index" data-id="item.id" data-even="item">
        <view class="videoItemTitle">item.title</view>
      </video>
    </block>
  </view>

js

data: 
    // 当前播放id
    currentPlayId: '',
    //当前播放video上下文对象，全局只有这一个播放
    videoContext: wx.createVideoContext("当前数组中随便一条视频的id，可使用第一条视频id", this),
    //保存请求下来的视频数组
    videoListData: [], 
  ,


<!-- 点击播放按钮触发事件-->
handlePlay(event) 

    let _this = this;
    //记录当前即将要播放的视频id
    let clickVideoId = event.currentTarget.dataset.even.id;
    //判断是否正在有视频播放
    if (_this.data.currentPlayId) 
      //有正在播放的视频
      //判断和上一个视频是否是同一个视频
      if (_this.data.currentPlayId != clickVideoId) 

        <!--暂停当前正在播放的视频，下面的赋值课省略，用下方一行代码_this.data.// videoContext.pause();取代即可-->
        // _this.setData(
        // videoContext: // wx.createVideoContext(String(_this.data.currentPlayId), _this)
        //,() => 
        // _this.data.videoContext.pause();
        // )

        // 暂停当前正在播放的视频（这一行代码可取代上面的代码）
        _this.data.videoContext. pause();
        // 播放当前点击的视频（需要将当前视频id(clickVideoId)赋值createVideoContext后，在进行播放）
        _this.setData(
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        , () => 
          // 播放（经测试，次行播放代码可以省略）
          _this.data.videoContext.play();
        )

        //更新正在播放视频id currentPlayId
        _this.setData(
          currentPlayId: clickVideoId
        )
      
    
    //没有正在播放的视频就直接保存clickVideoId
    else 
      _this.setData(
        currentPlayId: clickVideoId
      )
    
  

实现思路

1.通过全局变量currentPlayId保存当前播放视频的id，
2.判断当前是否有视频在播放：
如果有，则通过videoContext. pause()暂停当前播放的视频，播放要播放的视频videoContext.play()。更新正在播放的视频id到currentPlayId。
如果没有，则播放视频，并且将该视频id存储到currentPlayId。