标签：uniapp videoContext 视频 进度条 用户 watchTime video videoRealTime 播放

html：

<view class="content">
    <video
      id="myVideo"
      class="video"
      @timeupdate="timeUpdate"
      @ended="ended"
      :initial-time="initialTime"
      :src="courseMsg.videos"
      :poster="courseMsg.img"
    />
</view>

js：

export default {
  data() {
    return {
      videoTime: 0, // 视频时间长度
      videoContext: '', // 用来存储video对象
      watchTime: 0, // 实际观看时间
      videoRealTime: 0, // 实时播放进度
      initialTime: 0, //该用户看到的位置
      courseMsg: {
        videos:
          'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
        img: 'https://img1.baidu.com/it/u=2374708084,3068058562&fm=26&fmt=auto'
      }
    };
  },
  onReady() {
    // 视频唯一ID
    this.videoContext = uni.createVideoContext('myVideo');
  },
  onl oad() {
    // 调用接口取到该用户播放的位置（秒）
    this.watchTime = 60;
    this.initialTime = 60;
  },
  methods: {
    timeUpdate(e) {
      //视频时长
      this.videoTime = parseInt(e.detail.duration);
      // 记录用户当前视频进度
      var jumpTime = parseInt(e.detail.currentTime);
      // 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进
      if (jumpTime - this.watchTime > 3) {
        // 差别过大，调用seek方法跳转到实际观看时间
        this.videoContext.seek(this.watchTime);
	uni.showToast({
	　　title: '未完整看完该视频，不能快进',
	　　icon: 'none',
	　　duration: 2000
	});
      } else {
        this.videoRealTime = parseInt(e.detail.currentTime);
        if (this.videoRealTime > this.watchTime) {
          this.watchTime = this.videoRealTime;
        }
      }
    },
    ended() {
      // 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
      if (this.watchTime < this.videoTime) {
        this.videoContext.play();
      }
    }
  }
};

css：

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video {
	width: 100%;
}

其中的watchTime和initialTime是从后台接口获取的,每一次的播放记录存储在后台,每一次打开都会去获取到上次的播放记录和已播完的部分,这样就可以轻松解决视频未播放完成不能跳过的问题了!

标签：uniapp,videoContext,视频,进度条,用户,watchTime,video,videoRealTime,播放
来源： https://www.cnblogs.com/zaijin-yang/p/16483642.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。