修改video.js为通用组件

882a7f1d · 王鹏飞 · d11f68c3 · 882a7f1d · 882a7f1d · 882a7f1d
--- a/index.html
+++ b/index.html
@@ -5,9 +5,6 @@
    <link rel="icon" href="https://zws-imgs-pub.ezijing.com/pc/base/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
-    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet" />
-    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
-    <!-- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> -->
  </head>
  <body>
    <div id="app"></div>

--- a/src/components/base/AppVideoPlayer.vue
+++ b/src/components/base/AppVideoPlayer.vue
 <template>
-  <div>
  <video ref="videoPlayer" class="video-js"></video>
-  </div>
 </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: 'VideoPlayer',
+  name: 'AppVideoPlayer',
  props: {
    options: {
      type: Object,
@@ -22,14 +27,66 @@ export default {
      player: null
    }
  },
-  mounted() {
-    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
-      console.log('onPlayerReady', this)
-    })
+  computed: {
+    videoOptions() {
+      return Object.assign({}, DEFAULT_OPTIONS, this.options)
+    }
  },
-  beforeDestroy() {
+  watch: {
+    options: {
+      deep: true,
+      handler() {
        if (this.player) {
          this.player.dispose()
+          this.player = null
+        }
+        this.initPlayer()
+      }
+    }
+  },
+  mounted() {
+    !this.player && this.initPlayer()
+  },
+  beforeDestroy() {
+    this.player && this.player.dispose()
+  },
+  methods: {
+    initPlayer() {
+      const _this = this
+      this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
+        _this.$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) => {
+            console.log(eventName)
+            _this.$emit(eventName, ...args)
+          })
+        })
+      })
    }
  }
 }

--- a/src/modules/school/course/components/DialogVideoPlayer.vue
+++ b/src/modules/school/course/components/DialogVideoPlayer.vue
+<template>
+  <el-dialog v-bind="$attrs" v-on="$listeners" width="800px" top="20vh">
+    <app-video-player :options="options" v-on="$listeners"></app-video-player>
+  </el-dialog>
+</template>
+<script>
+import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
+export default {
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  components: { AppVideoPlayer }
+}
+</script>
--- a/src/modules/school/course/components/VideoPlayer.vue
+++ b/src/modules/school/course/components/VideoPlayer.vue
-<template>
-  <el-dialog :title="info.title" v-bind="$attrs" v-on="$listeners" width="800px" top="20vh">
-    <video id="videoPlayer" width="760" class="video-js" controls="controls"></video>
-  </el-dialog>
-</template>
-<script>
-export default {
-  props: {
-    info: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      player: null
-    }
-  },
-  mounted() {
-    const url = this.info.url
-    setTimeout(() => {
-      this.player = window.videojs('videoPlayer')
-      this.player.src({
-        src: url,
-        type: 'application/x-mpegURL'
-        // withCredentials: true
-      })
-      this.player.play()
-    }, 300)
-  },
-  beforeDestroy() {
-    this.player.dispose()
-  }
-}
-</script>
-<style scoped>
-</style>
--- a/src/modules/school/course/views/Details.vue
+++ b/src/modules/school/course/views/Details.vue
@@ -30,14 +30,13 @@
        </el-collapse-item>
      </el-collapse>
    </app-card>
-    <video-player v-if="isShowDialog" :info="videoInfo" :visible.sync="isShowDialog" />
+    <dialog-video-player :visible.sync="isShowDialog" v-bind="dialogVideoOptoins" v-if="isShowDialog" />
  </div>
 </template>
 <script>
-import VideoPlayer from '../components/VideoPlayer.vue'
 import { getCourseDetails, getVideoUrl } from '../api'
 export default {
-  components: { VideoPlayer },
+  components: { DialogVideoPlayer: () => import('../components/DialogVideoPlayer.vue') },
  data() {
    return {
      info: {},
@@ -67,8 +66,11 @@ export default {
        }
      ],
      active: 0,
-      videoInfo: null,
-      isShowDialog: false
+      isShowDialog: false,
+      dialogVideoOptoins: {
+        title: '', // dialog title
+        options: {} // video options
+      }
    }
  },
  filters: {
@@ -98,21 +100,18 @@ export default {
    this.fetchCourseList()
  },
  methods: {
-    onPlay(val) {
-      this.isShowDialog = true
-      this.videoInfo = val
-    },
    fetchVideoUrl(val) {
      if (!this.btnView || val.type !== 2) {
        return
      }
      getVideoUrl({ vid: val.resource_id }).then(res => {
        if (res.video) {
-          const url = res.video.HD || res.video.fD || res.video.SD || res.video.LD
-          this.videoInfo = {
-            url: url,
+          const { SD, LD, FD } = res.video
+          this.dialogVideoOptoins = {
            title: val.name,
-            vid: val.resource_id
+            options: {
+              sources: [{ src: SD }, { src: LD }, { src: FD }]
+            }
          }
          this.isShowDialog = true
        }