微信小程序实现当前页面多个视频文件只播放一个视频

微信小程序实现当前页面多个视频文件只播放一个视频

<video src="{{item.url}}" id="myVideo{{index}}"  data-index='{{index}}' bindplay="videoPlay" ></video>
// 页面的初始数据
  data: {
    indexCurrent:null
  },

videoPlay: function (e) {
    var that = this;
    var curIdx = e.currentTarget.dataset.index;
    
    // 之前有播放时,将其暂停
    if (that.data.indexCurrent != null) {
      let videoContextPrev = wx.createVideoContext('myVideo' + that.data.indexCurrent)
      if (that.data.indexCurrent != curIdx) {
        videoContextPrev.pause()
      }
      that.setData({
        indexCurrent: curIdx
      })
    } else {  
    // 当前没有播放的播放视频
      that.setData({
        indexCurrent: curIdx
      })
    }
  }

微信小程序实现当前页面多个视频文件只播放一个视频,且再次点击当前播放视频时,实现暂停播放

<video src="{{item.url}}"  id="myVideo{{index}}"  data-index='{{index}}' bindplay="play" ></video>
// 页面的初始数据
  data: {
    indexCurrent:-1,
    videos:[url1.url2.url3]
  },

//视频切换暂停播放
  play(e) {
    var that = this;
    var id = e.currentTarget.index;
    for (var i = 0; i < that.data.videos.length; i++) {
      if (that.data.indexCurrent === id) {
        //console.log('暂停正在播放的视频');
        let videoContext1 = wx.createVideoContext("myVideo"+i);
        videoContext1.pause();
      } else if (id === 'myVideo' + i) {
        //console.log('播放视频不做处理');
        that.data.indexCurrent = id;
      } else {
        //console.log('暂停其他正在播放的视频');
        let videoContext2 = wx.createVideoContext("myVideo"+i);
        videoContext2.pause();
      }
    }
    
  },
posted @   槑孒  阅读(650)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示