video/pdf文件预览与进度上传

video

视频文件直接使用video标签预览,和后端设定的是学员在观看视频时,前端会5秒钟上传一次进度,记录学员当前视频所学的进度,当视频观看完成时会立即触发一次进度上报接口。

javascript 复制代码
 <video
  	ref="video"
   :src="xxxxx"
   class="h-full"
   :class="{'videoids':xxxx}" // 有的视频不允许拖动进度条时加上这个class
   preload="auto"
   controls
   @loadeddata="loadeddata"
   @play="play"
   @pause="pause"
   @timeupdate="timeupdate" // 这个事件中可以处理弹出不同时间点跳出的随堂练习题目
   @ended="ended"
 />

loadeddata() {
  // 视频总时长
  this.progressObj.duration = this.$refs.video.duration 
  // 设置视频从哪里开始播放,是后端返回的观看到的进度
  this.$refs.video.currentTime = this.showInfo.currentProgress
},
play() {
  this.progressObj.play = true
  if (this.progressObj.timer) return
  this.getStart()
},
pause() {
  this.progressObj.play = false
},
ended() {
 if (this.progressObj.timer) {
    clearTimeout(this.progressObj.timer)
    this.progressObj.timer = null
  }
  this.updateLearnProgress()
},
getStart() {
  const that = this
  this.progressObj.timer = setTimeout(() => {
    clearTimeout(that.progressObj.timer)
    that.progressObj.timer = null
    that.updateLearnProgress()
  }, 5000)
},
updateLearnProgress() {
  if (!this.$refs.video) return
  const currentProgress = Math.floor(this.$refs.video.currentTime)
  api.xxx({
    currentProgress: currentProgress,
    ......
  }).then(({ data }) => {
    if (this.$refs.video) { ...... }
  })
  if (this.progressObj.play) this.getStart()
},

<style scoped lang="scss">
.videoids::-webkit-media-controls-timeline {
  display: none;
}
</style>

pdf

pdf/word/excel等文件,后端会统一处理返回pdf文件格式,前端使用pdfjs库进行文件预览。在翻页时进行进度上传,对于频繁的滚动翻页会进行防抖处理。

javascript 复制代码
<PDFPreviewProgress
 ref="pdf"
 :path="xxxx"
 :info="showInfo"
/>

// PDFPreviewProgress.vue
<template>
  <div class="w-full h-full">
    <iframe
      id="prf-pre-pro"
      :src="pdfurl"
      width="100%"
      height="100%"
    />
  </div>
</template>
<script>
import { debounce } from 'lodash'
export default {
  props: {
    path: { type: String, default: '' },
    info: { type:Object, default:() => ({}) },
  },
  data() {
    return {
      pdfurl: '',
      interval: null,
    }
  },
  watch: {
    path() {
      this.queryFile()
      if (this.interval) {
      	clearInterval(this.interval)
      	this.interval = null
      }
      this.interval = setInterval(this.checkPdf, 300)
    }
  },
  beforeDestroy() {
    if (this.PDFViewerApplication) {
      this.PDFViewerApplication.pdfViewer.eventBus.off('pagechanging', that.pageChange);
      this.PDFViewerApplication = null
    }
    if (this.interval) {
    	clearInterval(this.interval)
    	this.interval = null
    }
  },
  methods: {
    queryFile() {
      const fileUrl = '/xxxx/pdfjs/web/viewer.html'
      this.pdfurl = fileUrl + '?file=' + encodeURIComponent(this.path)
    },
    checkPdf() {
      if (!(document.getElementById('prf-pre-pro')?.contentWindow?.PDFViewerApplication)) return;
      let PDFViewerApplication = document.getElementById('prf-pre-pro').contentWindow.PDFViewerApplication
      if (!(PDFViewerApplication.pagesCount && PDFViewerApplication.pdfViewer)) return;
      clearInterval(this.interval)
      this.interval = null
      this.PDFViewerApplication = PDFViewerApplication
      PDFViewerApplication.page = Math.max(1, this.info.currentProgress)
      const that = this
      this.PDFViewerApplication.pdfViewer.eventBus.on('pagechanging', that.pageChange);
    },
    pageChange(evt) {
      this.isUPdataProgress(evt.pageNumber, this.PDFViewerApplication.pagesCount)
    },
    isUPdataProgress: debounce(function(pageNum, pagesCount) {
      this.$emit('updatePdfProgress', pageNum, pagesCount)
    }, 1000)
  }
}
</script>
相关推荐
致博软件F2BPM16 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding9 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜9 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD9 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding9 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空9 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui