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

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

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

html

    <view class='videoBoxTitle'>视频列表</view>
    <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="videoClickAction" data-index="index" data-id="item.id" data-even="item">
        <view class="videoItemTitle">item.title</view>
      </video>
    </block>
  </view>

js

  data: 
    // 当前播放id
    currentPlayId: '',
    videoContext: wx.createVideoContext("当前数组中随便一条视频的id，可使用第一条视频id", this),
    videoListData: [],
  ,


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

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

        // _this.setData(
        //   videoContext: wx.createVideoContext(String(_this.data.currentPlayId), _this)
        // ,() => 
        _this.data.videoContext.pause();
        // )

        // 暂停上一个视频
        // _this.data.videoContext. pause();
        // 播放当前点击的视频
        _this.setData(
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        , () => 
          // 播放（次行代码可省略）
          _this.data.videoContext.play();
        )

        //更新正在播放视频id currentPlayId
        _this.setData(
          currentPlayId: clickVideoId
        )
      
    
    //没有正在播放的视频就直接保存clickVideoId
    else 
      _this.setData(
        currentPlayId: clickVideoId
      ,() => 
      //并且使用当前视频ID（clickVideoId）创建上下文videoContext，为了点击下条视频暂停该视频
        _this.setData(
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        )
      )
    
  ,

实现思路

1.通过全局变量currentPlayId保存当前播放视频的id，
2.判断当前是否有视频在播放：
如果有，则通过videoContext. pause()暂停当前播放的视频，使用方法videoContext.play()播放要播放的视频。更新正在播放的视频id到currentPlayId。
如果没有，则播放视频，并且将该视频id存储到currentPlayId。并且使用当前视频ID（clickVideoId）创建上下文videoContext。