web端实现视频播放（进度条更新，禁止快进）

好想Z☡zᶻ

已于 2024-02-22 08:47:51 修改

阅读量778

点赞数 9

文章标签：前端音视频 javascript

于 2024-02-21 17:11:29 首次发布

本文链接：https://blog.csdn.net/qq_45750213/article/details/136205137

版权

实现效果：


视频容器：

<div class="content">
<video
  autoplay
  @ended="videoEnded"
  @timeupdate="videoUpdate"
  ref="video"
  width="100%"
  controls
  disablePictureInPicture
  controlsList="nodownload noremoteplayback disablePictureInPicture noplaybackrate"
  :src="videoUrl"></video>
</div>

方法：


    // 点击章节展开按钮
    handleOn (list, item) {
      list.forEach(i => { i.active = false })
      item.active = true
      this.getCourseInfo(item).then((chiList) => {
        this.clickChi(chiList, chiList[0])
      })
    },   
    // 获取章节列表
    getCourseInfo (item) {
      return new Promise((resolve, reject) => {
        this.$api.workbenchesPeixun.courseInfo({ courseId: item.id, pxId: this.pxId }).then(res => {
          item.children = res.sectionInfoVOS.map(_item => {
            return {
              ..._item,
              currentTime: _item.lastView,
              courseId: item.id,
              active: this.selectedVideo ? this.selectedVideo.id === _item.id : false
            }
          })
          resolve(item.children)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 点击章节项
    clickChi (list, item) {
      list.forEach(i => { i.active = false })
      item.active = true
      this.selectedVideo = item
      this.videoUrl = `${process.env.VUE_APP_BASE_API}/px/online/play?videoId=${item.videoId}&token=${this.$store.state.token}`
      this.$refs.video.load()
      this.$refs.video.currentTime = item.lastView //视频定位到已播放的位置
    },
// 视频播放结束
    videoEnded: _.throttle(function () {
      this.updateRecord(this.selectedVideo.videoTime, 1)
    }, 500),
    // 观看中
    videoUpdate: _.throttle(function () {
      if (this.selectedVideo.ended) {
        // 跟上次观看时间相差30s
        if (Math.floor(this.$refs.video.currentTime) - this.selectedVideo.lastView > 29) {
          this.updateRecord(Math.floor(this.$refs.video.currentTime), 1)
        }
      } else {
        // 还没看完视频
        if (Math.floor(this.$refs.video.currentTime) - this.selectedVideo.currentTime > 1) {
          this.$message.warning('未学习完不能快进')
          this.$refs.video.currentTime = this.selectedVideo.currentTime
        } else {
          // 正常观看重置currentTime，快退不管
          if (Math.floor(this.$refs.video.currentTime) > this.selectedVideo.currentTime) {
            this.selectedVideo.currentTime = Math.floor(this.$refs.video.currentTime)
          }
          // 跟上次观看时间相差30s
          if (Math.floor(this.$refs.video.currentTime) - this.selectedVideo.lastView > 29) {
            this.updateRecord(Math.floor(this.$refs.video.currentTime))
          }
        }
      }
    }, 500),
//更新进度条（修改观看记录）
    updateRecord (viewTime = 0, ended = 0) {
      const data = {
        courseId: this.selectedVideo.courseId,
        ended: ended,
        pxId: this.pxId,
        sectionId: this.selectedVideo.id,
        viewTime: viewTime
      }
      this.$api.workbenchesPeixun.addViewRecord(data).then(res => {
        const item = this.courseList.filter(i => i.id === data.courseId)[0]
        this.selectedVideo.lastView = viewTime
        this.selectedVideo.currentTime = viewTime
        this.selectedVideo.ended = ended
        this.getCourseInfo(item)
        if (ended === 1) {
          this.getInfo()
        }
      })
    }