chore: 视频第一次播放禁用向后拖拽

src/modules/viewer/components/player/chapterPlayer.vue

@@ -4,9 +4,11 @@
       <div class="player-column" v-show="videoVisible">
         <!-- 视频 -->
         <video-player
+          disabled
           :isSkip="isSkip"
           :skipTime="skipTime"
           :video="chatperResources.video"
+          :mpt="progress.mpt"
           @timeupdate="onTimeupdate"
           @ready="onReady"
           ref="videoPlayer"
@@ -218,7 +220,7 @@ export default {
           device_id: Cookies.get('_idt')
         })
         .then(response => {
-          this.progress = response
+          this.progress = Object.assign(response, { mpt: window.parseInt(response.mpt) })
           // 跳转播放进度
           if (this.player && response.cpt) {
             this.player.seek(response.cpt)

src/modules/viewer/components/player/videoPlayer.vue

@@ -9,12 +9,22 @@ export default {
     isSkip: Boolean,
     video: Object,
     autoplay: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    mpt: { type: Number, default: 0 } // 最大观看时间点
   },
   data() {
     let videoRetry = parseInt(window.localStorage.getItem('videoRetry'))
     videoRetry = isNaN(videoRetry) ? 3 : videoRetry
-    return { player: null, videoRetry }
+    return { player: null, videoRetry, currentTime: 0, duration: 0 }
+  },
+  watch: {
+    mpt: {
+      immediate: true,
+      handler() {
+        const left = (Math.max(this.mpt, this.currentTime) / this.duration) * 100
+        $('.prism-progress-copy').css('left', left + '%')
+      }
+    }
   },
   methods: {
     createPlayer() {
@@ -43,26 +53,34 @@ export default {
           useHlsPluginForSafari: true,
           language: this.$i18n.locale === 'zh-CN' ? 'zh-cn' : 'en-us'
         },
-        function (player) {
+        function(player) {
           // 禁止调整进度，隐藏声音和倍数
           if (_this.disabled) {
-            $('.prism-volume, .prism-setting-speed').hide()
-            $('.prism-progress').css('pointer-events', 'none')
+            // $('.prism-volume, .prism-setting-speed').hide()
+            // $('.prism-progress').css('pointer-events', 'none')
+            $('.prism-controlbar').append('<div class="prism-progress-copy"></div>')
+            $('.prism-progress-copy').on('click', e => {
+              return false
+            })
           }
+          player.on('playing', function() {
+            _this.duration = player.getDuration()
+          })
 
-          player.on('ready', function () {
+          player.on('ready', function() {
             // 跳过片头
             _this.isSkip && player.seek(6)
             _this.$emit('ready', player)
           })
-          player.on('timeupdate', function (event) {
+          player.on('timeupdate', function(event) {
             const currentTime = player.getCurrentTime()
+            _this.currentTime = currentTime
             _this.$emit('timeupdate', currentTime)
             if (currentTime > 1) {
               window.localStorage.setItem('videoRetry', 3)
             }
           })
-          player.on('error', function (event) {
+          player.on('error', function(event) {
             _this.$emit('error', event)
             if (_this.videoRetry) {
               window.localStorage.setItem('videoRetry', _this.videoRetry - 1)
@@ -88,4 +106,13 @@ export default {
   width: 100%;
   height: 100%;
 }
+::v-deep .prism-progress-copy {
+  position: absolute;
+  height: 18px;
+  top: -5px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  // pointer-events: none;
+}
 </style>