处理视频播放

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
   },
   rules: {
     'vue/multi-word-component-names': 'off',
-    '@typescript-eslint/no-explicit-any': 'off'
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-this-alias': ['off']
   }
 }

package.json

@@ -22,6 +22,7 @@
     "pinia": "^2.0.14",
     "qs": "^6.10.5",
     "sortablejs": "^1.15.0",
+    "video.js": "^7.19.2",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16"
   },

src/components/base/AppVideoPlayer.vue

+<template>
+  <video ref="videoPlayer" class="video-js"></video>
+</template>
+
+<script>
+import videojs from 'video.js'
+import 'video.js/dist/video-js.css'
+
+const DEFAULT_OPTIONS = {
+  controls: true,
+  autoplay: true,
+  fluid: true
+}
+
+export default {
+  name: 'AppVideoPlayer',
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      player: null
+    }
+  },
+  computed: {
+    videoOptions() {
+      return Object.assign({}, DEFAULT_OPTIONS, this.options)
+    }
+  },
+  watch: {
+    options: {
+      deep: true,
+      handler() {
+        if (this.player) {
+          this.player.dispose()
+          this.player = null
+        }
+        this.initPlayer()
+      }
+    }
+  },
+  mounted() {
+    !this.player && this.initPlayer()
+  },
+  beforeUnmount() {
+    this.player && this.player.dispose()
+  },
+  methods: {
+    initPlayer() {
+      const self = this
+      this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
+        self.$emit('ready', this)
+        const DEFAULT_EVENTS = [
+          'abort',
+          'canplay',
+          'canplaythrough',
+          'durationchange',
+          'emptied',
+          'ended',
+          'error',
+          'loadeddata',
+          'loadedmetadata',
+          'pause',
+          'play',
+          'playing',
+          'progress',
+          'ratechange',
+          'resize',
+          'seeked',
+          'seeking',
+          'stalled',
+          'suspend',
+          'timeupdate',
+          'volumechange',
+          'waiting'
+        ]
+        // 注册事件
+        DEFAULT_EVENTS.forEach(eventName => {
+          this.on(eventName, (...args) => {
+            self.$emit(eventName, ...args)
+          })
+        })
+      })
+    }
+  }
+}
+</script>

src/modules/resource/video/components/ViewCenter.vue

 <script setup lang="ts">
+import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
 const props = defineProps(['data'])
+const videoOptions = $computed(() => {
+  return { sources: [{ src: props.data.play_auth.play_info_list[0].PlayURL }] }
+})
 </script>
 <template>
 <div class="center-video-box">
-  <video width="812" height="433" :poster="props.data.cover" controls> 
-    <source type="application/x-mpegURL" :src="props.data.play_auth.play_info_list[0].PlayURL"> 
-  </video> 
+  <div style=" width:812px; height:433px;padding-bottom: 20px;">
+    <AppVideoPlayer :options="videoOptions"></AppVideoPlayer>
+  </div>
   <div class="right-statistics">
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon1.png">
       <div class="content">
-        <div class="unit">{{ props.data.project_count }}<span>个</span></div>
+        <div class="unit">{{ data.project_count }}<span>个</span></div>
         <div class="tag">使用项目/学校</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon2.png">
       <div class="content">
-        <div class="unit">{{ props.data.course_count }}<span>个</span></div>
+        <div class="unit">{{ data.course_count }}<span>个</span></div>
         <div class="tag">使用课程</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon3.png">
       <div class="content">
-        <div class="unit">{{ props.data.learn_count }}<span>个</span></div>
+        <div class="unit">{{ data.learn_count }}<span>个</span></div>
         <div class="tag">累计学习人次</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon4.png">
       <div class="content">
-        <div class="unit">{{ props.data.learn_time_count }}<span>个</span></div>
+        <div class="unit">{{ data.learn_time_count }}<span>个</span></div>
         <div class="tag">累计学习时长</div>
       </div>
     </div>