video预览

package.json

@@ -23,6 +23,7 @@
     "element-ui": "2.13.0",
     "gm-crypt": "^0.0.2",
     "html-loader": "^1.1.0",
+    "jquery": "^3.7.1",
     "js-base64": "^2.6.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -35,8 +36,9 @@
     "v-viewer": "^1.5.1",
     "vue": "2.6.10",
     "vue-cropper": "^0.5.4",
-    "vue-pdf": "^4.1.0",
+    "vue-pdf": "^4.0.7",
     "vue-router": "3.0.6",
+    "vue-video-player": "^5.0.0",
     "vuedraggable": "^2.23.2",
     "vuex": "3.1.0"
   },

src/components/pdfView/MtPdf.vue

+<template>
+  <div class="pdf-container">
+    <div class="pdf" @scroll="onScroll()">
+      <div class="pdfList">
+        <pdf
+          v-for="(i,index) in numPages"
+          :id="index"
+          :key="i"
+          class="pdfItem"
+          :src="src"
+          :page="i"
+          style="display: inline-block; width: 100%"
+          :rotate="rotate"
+        />
+      </div>
+    </div>
+    <div class="tool-bar">
+      <input v-if="!blockJumpPage" v-model="page" onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/" @keyup.enter="toPage" @blur="toPage"><span v-if="blockJumpPage" style="font-weight:bold">{{ page }}</span>&nbsp;/&nbsp;{{ numPages }}
+
+      <a class="resize" @click="toLittle">-</a>
+      <a class="resize" @click="toBig(true)">+</a>
+      <!-- <a class="aRotate" @click="rotate += 90">&#x27F3;</a>
+      <a class="aRotate" @click="rotate -= 90">&#x27F2;</a> -->
+
+    </div>
+  </div>
+</template>
+<script>
+import pdf from 'vue-pdf'
+import $ from 'jquery'
+export default {
+  components: {
+    pdf: pdf
+  },
+  props: {
+    pdfSrc: {
+      type: String,
+      default: ''
+    },
+    startPage: {
+      type: Number,
+      default() {
+        return 1
+      }
+    },
+    blockJumpPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      src: '',
+      numPages: undefined,
+      page: 1,
+      rotate: 0,
+      pageArr: [1],
+      loading: false,
+      loadTask: '',
+      findOutPage: false
+    }
+  },
+  watch: {
+    page(curVal, oldVal) {
+      const newPage = parseInt(curVal)
+      console.log('page watch:', newPage)
+      if (newPage > 0 && newPage < (this.numPages + 1)) {
+        this.$emit('pageChange', newPage)
+      } else if (!isNaN(newPage)) {
+        this.page = this.numPages
+      }
+      //        this.page = parseInt((this.page).toString().replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, '') || 1) > this.numPages ? this.numPages : parseInt((this.page).toString().replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, '') || 1);
+    }
+  },
+  destroyed() {
+  },
+  beforeMount() {
+    this.loadPdf()
+  },
+  methods: {
+    //      handleInput(e){
+    //        this.page=parseInt(e.target.value.replace(/[^\d]/g,''));
+    //      },
+    toPage() {
+      console.log('toPage-----------', this.page)
+      const newPage = parseInt(this.page)
+      if (newPage < 1 || $.trim(this.page) == '') {
+        console.log('toPage-----------<1')
+        this.page = 1
+      }
+      if (newPage > this.numPages) {
+        console.log('toPage----------->total')
+        this.page = this.numPages
+      }
+      // window.location.hash=(this.page-1)+"";
+      this.scrollToPage(this.page)
+    },
+    scrollToPage(page) {
+      if (this.findOutPage) {
+        let itemHeight = 0
+        $('.pdfItem').each(function() {
+          const h = $(this).height()
+          itemHeight = itemHeight < h ? h : itemHeight
+        })
+        $('.pdfItem').each(function() {
+          $(this).height(itemHeight)
+        })
+        this.findOutPage = false
+      }
+      const outerHeight = $('.pdfItem').outerHeight(true)
+
+      $('.pdf')[0].scrollTop = (page - Math.ceil($('.pdf').height() / outerHeight)) * outerHeight
+    },
+    toLittle() {
+      const cW = $('.pdf-container').width()
+      const cH = $('.pdf-container').height()
+
+      const pW = $('.pdfList').width()
+      const pH = $('.pdfList').height()
+      if (pW * 5 / 6 < cW * 0.01 || (pH * 5 / 6 / this.numPages) < cH * 0.01) {
+        this.$message({
+          type: 'warning',
+          message: '已到最小缩放倍数',
+          duration: 0,
+          showClose: true
+        })
+        return false
+      }
+      this.findOutPage = false
+      //        let newW = pW*5/6<cW*0.3?cW*0.3:pW*5/6;
+      //        let newH = (pH*5/6/this.numPages)<cH*0.3?cH*0.3*this.numPages:pH*5/6;
+      const newW = pW * 5 / 6
+      const newH = pH * 5 / 6
+      $('.pdfList').width(newW)
+      $('.pdfList').height(newH)
+    },
+    toBig(If) {
+      const cW = $('.pdf-container').width()
+      const cH = $('.pdf-container').height()
+
+      const pW = $('.pdfList').width()
+      const pH = $('.pdfList').height()
+      if (pW * 6 / 5 > cW && (pH * 6 / 5 / this.numPages) > cH) {
+        if (If) {
+          this.$message({
+            type: 'warning',
+            message: '已到最大缩放倍数',
+            duration: 0,
+            showClose: true
+          })
+        }
+        return
+      }
+      this.findOutPage = false
+      let newW, newH
+      //        newW = pW*6/5>cW?cW:pW*6/5;
+      //        newH = (pH*6/5/this.numPages)>cH?cH*this.numPages:pH*6/5;
+      newW = pW * 6 / 5
+      newH = pH * 6 / 5
+      $('.pdfList').width(newW)
+      $('.pdfList').height(newH)
+    },
+    onScroll() {
+      if (this.findOutPage) {
+        let itemHeight = 0
+        $('.pdfItem').each(function() {
+          const h = $(this).height()
+          itemHeight = itemHeight < h ? h : itemHeight
+        })
+        $('.pdfItem').each(function() {
+          $(this).height(itemHeight)
+        })
+        this.findOutPage = false
+      }
+      const outerHeight = $('.pdfItem').outerHeight(true)
+      const scrolled = $('.pdf')[0].scrollTop
+      this.page = parseInt((scrolled + outerHeight) / (outerHeight)) + Math.ceil($('.pdf').height() / outerHeight) - 1
+    },
+    loadPdf() {
+      this.loading = true
+      this.src = pdf.createLoadingTask(this.pdfSrc)
+      this.src.promise.then(pdf => {
+        this.numPages = pdf.numPages
+        this.page = this.startPage
+        this.$emit('loaded', pdf.numPages)
+        this.findOutPage = true
+        setTimeout(() => {
+          this.toPage()
+          this.loading = false
+        }, 1500)
+        setTimeout(() => {
+          this.toBig(false)
+          this.rotate += 360
+        }, 1000)
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .pdf-container {
+    background-color: #000;
+    text-align: center;
+    height: 100%;
+    display:flex;
+    flex-flow: column;
+    overflow: hidden;
+  }
+  .tool-bar {
+    width: 100%;
+    background: #000;
+    height: 48px;
+    line-height: 48px;
+    /* box-shadow: 0 2px 6px 0 rgb(50, 54, 57); */
+    color: rgb(241, 241, 241);
+    text-align: center;
+    font-size: 13px;
+  }
+  .tool-bar a {
+    color: rgb(241, 241, 241);
+    cursor: pointer;
+  }
+  .tool-bar a:hover {
+    color: #ff6b1b;
+  }
+  .tool-bar input {
+    font-size: 15px;
+    display: inline-block;
+    color: rgb(241, 241, 241);
+    width: 100px;
+    text-align: center;
+    max-width: 30px;
+    border: 1px solid #0D242D;
+    background: transparent;
+    border: none;
+    /*border-bottom: 1px solid #ff6b1b;*/
+  }
+
+  .pdfList {
+    display: inline-block;
+    /* margin-top: 20px; */
+    width: 85%;
+    cursor:pointer;
+    pointer-events: none;
+  }
+  .pdfList div {
+    background: none;
+    border-radius: 5px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    box-shadow: 1px 4px 10px 2px rgb(50, 54, 57);
+  }
+  .aRotate {
+    font-size: 16px;
+    float: right;
+    margin-right: 15px;
+  }
+  .resize {
+    font-size: 25px;
+    float: right;
+    margin-right: 15px;
+  }
+  .pdf {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .pdf::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  .pdf::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 6px;
+    box-shadow: inset 0 0 3px #f1f1f1;
+    background: #c0c0c0;
+  }
+  .pdf::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    box-shadow: inset 0 0 3px #f1f1f1;
+    border-radius: 6px;
+    background: #f1f1f1;
+  }
+</style>

src/components/pdfView/index.vue

+<template>
+  <div>
+    {{ currentPage }} / {{ pageCount }}
+    <pdf
+      :src="pdfSrc"
+      :page="startPage"
+      @num-pages="pageCount = $event"
+      @page-loaded="currentPage = $event"
+    />
+    <div @click="upPage">上一页</div>
+    <div @click="downPage">下一页</div>
+  </div>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+export default {
+  name: 'Index',
+  components: {
+    pdf
+  },
+  props: {
+    pdfSrc: {
+      type: String,
+      default: ''
+    },
+    startPage: {
+      type: Number,
+      default() {
+        return 1
+      }
+    },
+    blockJumpPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentPage: 0,
+      pageCount: 0
+    }
+  },
+  methods: {
+    upPage() {
+      this.$emit('pageChange', this.startPage - 1 > 1 ? this.startPage - 1 : 1)
+    },
+    downPage() {
+      this.$emit('pageChange', this.startPage + 1 > this.pageCount ? this.pageCount : this.startPage + 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/routes.js

@@ -99,6 +99,12 @@ const USER_VISITOR_ROUTES = [
         meta: { title: '关于我们', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
         component: () => import('@/views/aboutUs/index')
       },
+      {
+        path: '/learnVideoDemo/index',
+        name: 'learnVideoDemo',
+        meta: { title: '视频pdfdemo', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
+        component: () => import('@/views/learnVideoDemo/index')
+      },
 
     ]
   }

src/views/learnVideoDemo/index.vue

+<!--
+总体参考项目为http://gitlab.91isoft.com:90/liuhuaizhi/mt-education-client
+dev-1.0分支src/components/Course/courseTrain/index.vue
+-->
+<template>
+  <div>
+    <div @click="changeView">切换</div>
+    <video-player
+      v-if="!viewFlag"
+      id="videoPlay"
+      ref="videoPlayer"
+      :class="['video-player', 'vjs-custom-skin',]"
+      :options="playerOptions"
+      :playsinline="true"
+      @timeupdate="onPlayerTimeupdate($event)"
+      @loadeddata="onPlayerLoadeddata($event)"
+      @ready="playerReadied"
+    />
+    <pdf-view
+      v-if="viewFlag"
+      :class="['pdf-previewer',isOutLine? 'limit-height': '']"
+      :block-jump-page="blockJumpPage"
+      :start-page="currentLocation"
+      :pdf-src="currentSection.fileUrl"
+      @pageChange="onPdfChange"
+    />
+  </div>
+</template>
+
+<script>
+import { videoPlayer } from 'vue-video-player'
+import pdfView from '@/components/pdfView/index'
+export default {
+  name: 'Index',
+  components: {
+    videoPlayer,
+    pdfView
+  },
+  data() {
+    return {
+      viewFlag: true,
+      currentLocation: 0, // 章节内容上一次学习位置（第几秒或第几页）
+      currentPlayTime: 0, // 视频或音频当前播放的时间
+      allPlayTime: 0, // 视频或音频的总时间
+      currentPage: 1, // ppt或pdf当前页
+      allPage: 1, // ppt或pdf总页数
+      maxPosition: 0,
+      currentSection: {
+      },
+      isOutLine: window.location.href.indexOf('CourseTrainOut') > -1, // 是否为外链
+      playerOptions: {
+        autoplay: true,
+        muted: false,
+        language: 'zh-CN',
+        preload: 'auto',
+        sources: [],
+        controlBar: {
+          volumePanel: false
+        },
+        notSupportedMessage: '很抱歉，您的浏览器不支持H5 Video播放器！'
+      },
+      loadPdf: false, // 未加载完的pdf ppt word 不需要更新进度
+      blockJumpPage: true // 是否可跳页 true否 false是
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+    /**
+     * @description: 切换video或者pdf显示模式
+     * @author: 刘
+     * @date: 2024/3/29
+     */
+    changeView() {
+      this.viewFlag = !this.viewFlag
+      if (this.viewFlag) {
+        this.pdfViewM()
+      } else {
+        this.videoPlayM()
+      }
+    },
+    /**
+     * @description: 显示pdf的方法
+     * @author: 刘
+     * @date: 2024/3/29
+     */
+    pdfViewM() {
+      this.maxPosition = 1
+      this.currentLocation = 6 // 设置开始展示页 后期应该从后台拿
+      // 以内容为从后台获得pdf地址及信息
+      this.currentSection.fileUrl = 'http://localhost:8083/a.pdf' // 设置pdf链接 后期从后台拿
+      /* this.getFileUrlByChapterId(section.businessId, (url) => {
+        section.fileUrl = url
+        this.updateTest = true
+        this.currentSection = section
+        console.log('click section isTest:', this.currentSection.isTest)
+        console.log('click section url:', this.currentSection.fileUrl)
+        this.currentChapter.index = chapterIndex
+        this.loading = false
+      }, (error) =>{
+        this.loading = false
+      })*/
+    },
+    videoPlayM() {
+      // 当切换节资料为“视频”时，更新视频参数中的url地址
+      this.playerOptions.sources = [
+        {
+          type: 'video/mp4',
+          src: 'http://vjs.zencdn.net/v/oceans.mp4' // "http://vjs.zencdn.net/v/oceans.mp4" section.videoUrl
+        }
+      ]
+      this.currentLocation = 20 // 视频开始时间单位是秒
+    },
+    /**
+     * @description: 当视频加载好后设置开始时间
+     * @author: 刘
+     * @date: 2024/3/29
+     */
+    playerReadied(player) {
+      console.log('KKKKKKKKKKKK', player)
+      player.currentTime(this.currentLocation)
+    },
+    /**
+     * @description: 播放时间更新后的回调函数
+     * @author: 刘
+     * @date: 2024/3/29
+     */
+    onPlayerTimeupdate(player) {
+      this.currentPlayTime = player.currentTime()
+      this.maxPosition = this.maxPosition < player.currentTime() ? player.currentTime() : this.maxPosition
+      // console.log('player Timeupdate!', player.currentTime())
+    },
+    /**
+     * @description: 视频加载好后获取视频总时长
+     * @author: 刘
+     * @date: 2024/3/29
+     */
+    onPlayerLoadeddata(player) {
+      this.allPlayTime = player.duration()
+      console.log(this.allPlayTime, 'pppppppppppppppppppppppppppppppppppppppppppppppppp')
+    },
+    onPdfChange(page) {
+      this.currentLocation = page
+      this.maxPosition = this.maxPosition < page ? page : this.maxPosition
+    }
+  }
+}
+</script>