微信小程序 视频列表 封面图 禁止多个视频同时播放

微信小程序视频列表用到的组件是  video    

链接  https://developers.weixin.qq.com/miniprogram/dev/component/video.html

先附上效果图（对比效果）

此为没有封面图的视频，简直丑到爆

 

 

 

此为加了封面图和自定义视频播放按钮

 

 

此为禁止多视频同时播放效果图

 

 

 大致思路就是，wx:for="{{ videoLlist }}"下三个view，一个视频video，另一个封面image（客户需求，要可以自定义封面）。
主要控制变量是playIndex，当点击封面时赋予当前点击的e.currentTarget.id，而id="{{ index }}"（index是微信wx:for自带的）。
在video加个wx:if，playIndex == index是判断条件，也就是说点击封面，对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play()，因为video渲染需要时间，无延迟的话还没渲染完play()就执行了。
其他video的wx:if=false（因为只有要播放的video渲染，而其他video不渲染，所以视频列表不会卡顿）
代码很挫，希望能帮到人

 

wxml:

  2019-01-22期
  
  
    
      {{item.title}}    
            

       
             
          
        
        
        
          
        
      
      {{item.content}}
      
        
        
          {{item.created_time}}
          {{item.watchNumber}}人次观看
          
        
      
    
  

 

js.

// pages/activity/historyList/historyList.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    playIndex: null,
    videoList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var videoList = [
      {
        id: "1",
        title: '第一篇 小美式装修风格案例客餐厅',
        content: '第一篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',
        coverUrl: '/images/xiangqing.jpg',
        startIcon: '/images/icon/video.png',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
        created_time: '2109-11-22',
        watchNumber: '33333',
      },{
        id: "2",
        title: '第二篇 小美式装修风格案例客餐厅',
        content: '第二篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',
        coverUrl: '/images/sc_tj03.jpg',
        startIcon: '/images/icon/video.png',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
        created_time: '2109-11-26',
        watchNumber: '44444',
      },{
        id: "3",
        title: '第三篇 小美式装修风格案例客餐厅',
        content: '第三篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',
        coverUrl: '/images/yzs-jx.jpg',
        startIcon: '/images/icon/video.png',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
        created_time: '2109-11-29',
        watchNumber: '5555555',
      }
    ];

    console.log(videoList);
    //数据显示
    that.setData({
      videoList: videoList,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },


  // 点击cover播放，其它视频结束
  videoPlay: function (e) {
    var id = e.currentTarget.id
    //console.log(this.data.playIndex, id) // 当前播放与当前点击
    if (!this.data.playIndex) { // 当前没有正在播放的视频时
      this.setData({
        playIndex: id
      })
      var videoContext = wx.createVideoContext('index' + id)
      videoContext.play()
    } else {                    // 当前有正在播放的视频先将prev暂停到0s，再播放当前点击的current
      var videoContextPrev = wx.createVideoContext('index' + this.data.playIndex)
      videoContextPrev.seek(0)
      videoContextPrev.pause()
      this.setData({
        playIndex: id
      })
      var videoContextCurrent = wx.createVideoContext('index' + this.data.playIndex)
      videoContextCurrent.play()
    }
  },

})

 

一个小程序中有多个视频，当打开一个视频时其它视频停止播放，我是用

videoContextPrev.seek(0)
videoContextPrev.pause()

 来伪装结束视频
但这样开多了似乎会卡顿（我并不确定现在开多了会卡顿是否是这个原因造成的）
有没有其他办法真正结束视频，我看有小程序实现这样的功能，视频中断结束再次打开得重新加载（而我的再次打开却立马开始，也就是说视频仅仅只是暂停在0s而已）

 

 

wxss:

/* pages/activity/historyList/historyList.wxss */
.font17{font-size: 34rpx;}

.radius15{border-radius: 30rpx;}
.radius20{border-radius: 40rpx;}
.radius50{border-radius: 50%;}

.border-or{border: 1px solid #f17f2b;}
.border-wh{border: 2px solid #fff;}

.font11{font-size: 22rpx;}
.font17{font-size: 34rpx;}

.wh25{width: 50rpx;height: 50rpx;}
.wh100{width: 200rpx;height: 200rpx;}

.lh20{line-height: 40rpx;}
.lh30{line-height: 60rpx;}
.lh35{line-height: 70rpx;}

.p_tb7{padding-top:15rpx;padding-bottom:15rpx;}

.bg_rule{background-color: #fe6903;}
.bg_graye{background-color: #eee;}
.bg_iconvip{background-color: #ffd200;}

.videoStyle{ width:100%; height:450rpx;}
.controls{ z-index:1; margin-top:5rpx;}
.play{ 
    left:50%;
    margin-top:-291rpx;
    margin-left:-80rpx;    
}