小程序播放当前视频关闭其他视频


  
    
    
    
    {{course.duration}}
  
.video-item{
  position: relative;
  width: 100%;
  height: 420rpx;
}
video{
  width: 100%;
  height: 100%;
}
.video-cover{
  position: absolute;
  left: 0;
  top: 0
}
.video-play-btn{
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto
}
.video-duration{
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
}
var app = getApp();


Page({

  /**
   * 页面的初始数据
   */
  data: {
    playIndex: null,//用于记录当前播放的视频的索引值
    courseList: [{
      videoUrl: 'xxx.mp4',//视频路径
      coverUrl: '/images/img2.jpg', //视频封面图
      duration: '03:00', //视频时长
    }, {
        videoUrl: 'xxx.mp4',
        coverUrl: '/images/img3.png',
      duration: '04:45',
    }]
  },
  videoPlay: function (e) {
    var curIdx = e.currentTarget.dataset.index;
    // 没有播放时播放视频
    if (!this.data.playIndex) {
      this.setData({
        playIndex: curIdx
      })
      var videoContext = wx.createVideoContext('video' + curIdx) //这里对应的视频id
      videoContext.play()
    } else { // 有播放时先将prev暂停,再播放当前点击的current
      var videoContextPrev = wx.createVideoContext('video' + this.data.playIndex)
      if (this.data.playIndex != curIdx) {
        videoContextPrev.pause()
      }
      this.setData({
        playIndex: curIdx
      })
      var videoContextCurrent = wx.createVideoContext('video' + curIdx)
      videoContextCurrent.play()
    }
  }
})

大佬博客地址:http://www.cnblogs.com/sese/p/9353864.html

你可能感兴趣的:(网页中用到过的效果,微信小程序)