微信小程序播放视频 禁止快进

用的组件是小程序自带的 video标签 详细查看官方文档

在这里插入图片描述
在这里插入图片描述
WXML

<video id="myVideo"  bindtimeupdate="timeUpdate" bindpause="pause" bindwaiting="waiting" binderror="error" src='视频链接地址' initial-time="{
     {initial_time}}" poster="视频封面图片链接地址" page-gesture controls >
</video>

JS

//获取应用实例
var app = getApp();
const bgMusic = wx.getBackgroundAudioManager()
Page({
     
  data: {
     
    video_real_time:0, //实时播放进度
    initial_time:'', //视频跳转进度 秒
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
     
    var that = this
    //此处写在接口的位置 100从接口处获取
    that.setData({
     
      initial_time:'100' //视频进度
    })
  },
  //监听视频播放进度
  timeUpdate: function (e) {
     
    var aa = 1; // 是否开启可以视频快进 1 禁止开启
    //跳转到指定播放位置 initial-time 时间为秒
    let that = this;
    //播放的总时长
    var duration = e.detail.duration
    //实时播放进度 秒数
    var currentTime = parseInt(e.detail.currentTime)
    //当前视频进度
    // console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间,以秒为单位
    if (that.data.video_real_time==0){
     
      var jump_time = parseInt(that.data.initial_time) + parseInt(that.data.video_real_time)
    }else{
     
      var jump_time = parseInt(that.data.video_real_time)
    }
    if(aa==1){
     
      if (currentTime > jump_time && currentTime - jump_time>3){
     
        let videoContext = wx.createVideoContext('myVideo')
        videoContext.seek(that.data.video_real_time)
        wx.showToast({
     
          title: '未完整看完该视频,不能快进',
          icon: 'none',
          duration: 2000,
        })
      }
    } 
    that.setData({
     
      video_real_time: currentTime, //实时播放进度
    })
  },
  pause: function (e) {
     
    console.log('视频暂停播放')
    console.log('暂停时播放时间====>' + this.data.video_real_time)
  },
  waiting: function (e) {
     
    console.log('视频缓冲')
    console.log(e)
  },
  error: function (e) {
     
    console.log('视频播放出错时')
    console.log(e)
  },
})

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