滑动切换下一个视频,点击暂停视频,再次点击播放视频,很多案列pc预览正常,真机调试就不能用了;此案例我手机是可以用的,废话不多说直接上源码

滑动切换下一个视频,点击暂停视频,再次点击播放视频,很多案列pc预览正常,真机调试就不能用了;此案例我手机是可以用的,废话不多说直接上源码
滑动切换下一个视频,点击暂停视频,再次点击播放视频,很多案列pc预览正常,真机调试就不能用了;此案例我手机是可以用的,废话不多说直接上源码_第1张图片



  

page {
  background: #eeecec;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100vh;
}

.ball {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.videoplay {
  width: 160rpx;
  height: 160rpx;
  z-index: 100;
}


Page({
  data: {
    play: 'none',
    inputValue: '',
    index: 1,
    vid: 0,
    pagey: '',
    vsrc: ['http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'https://vdse.bdstatic.com//c0a7b04bd35c91c3701aac5fc4529fa9?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F28d2b9fea149e3a2fb5a196930bf99193cbd524b2b49dfee97c80a5dd1e29a47', 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'https://vdse.bdstatic.com//c0a7b04bd35c91c3701aac5fc4529fa9?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F28d2b9fea149e3a2fb5a196930bf99193cbd524b2b49dfee97c80a5dd1e29a47', 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'https://vdse.bdstatic.com//c0a7b04bd35c91c3701aac5fc4529fa9?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F28d2b9fea149e3a2fb5a196930bf99193cbd524b2b49dfee97c80a5dd1e29a47', 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'https://vdse.bdstatic.com//c0a7b04bd35c91c3701aac5fc4529fa9?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F28d2b9fea149e3a2fb5a196930bf99193cbd524b2b49dfee97c80a5dd1e29a47', ],
    src: '',
  },

  onReady: function(res) {
    this.videoContext = wx.createVideoContext('myVideo')
  }, //点击播放暂停视频  
  jishu: function() {
    var that = this;
    this.setData({
      index: that.data.index + 1
    });
    console.log(that.data.index)
    if (that.data.index % 2 == 1) {
      this.videoContext.play()
      this.setData({
        play: 'none'
      })
    } else {
      this.videoContext.pause()
      this.setData({
        play: 'block'
      })
    }
  },
  bindPlay: function() {
    this.videoContext.play()
  },
  touchstart: function(res) {
    this.setData({
      pagey: res.changedTouches[0].pageY
    })
  },
  touchend: function(res) {
    if (res.changedTouches[0].pageY - this.data.pagey > 100) {
      var isZero = this.data.vid == 0
      var id = this.data.vid == 0 ? 0 : this.data.vid - 1
      if (isZero) {
        wx.showToast({
          title: '已是第一个!',
        })
      } else {
        this.setData({
          vid: id,
          index: 1
        })
        var that = this
        setTimeout(function() {
          that.bindPlay()
        }, 500)
      }
    } else if (this.data.pagey - res.changedTouches[0].pageY > 100) {
      var islast = this.data.vid == this.data.vsrc.length - 1
      var lid = this.data.vid == this.data.vsrc.length - 1 ? this.data.vsrc.length - 1 : this.data.vid + 1
      if (islast) {
        wx.showToast({
          title: '已是最后一个!',
        })
      } else {
        this.setData({
          vid: lid,
          index: 1
        })
      }
      var that = this
      setTimeout(function() {
        that.bindPlay()
      }, 500)
    }
  },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }, // 
  bindPlay: function() {
    this.videoContext.play()
    console.log(11)
  },
  bindPause: function() {
    this.videoContext.pause()
    
  },
  videoErrorCallback: function(e) {
    console.log('视频错误信息:') 
    console.log(e.detail.errMsg)
  },

})

若有疑问请加q1831836688

你可能感兴趣的:(微信小程序)