feat: 添加视频组件

package.json

@@ -39,6 +39,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",
+    "vue-video-player": "^5.0.2",
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1"
   },

src/main.js

@@ -20,6 +20,7 @@ import moment from 'moment'
 import { FormModel } from 'ant-design-vue'
 import { hasBtnPermission } from './utils/permissions'
 
+
 Vue.use(FormModel)
 Vue.prototype.hasPerm = hasBtnPermission
 

src/views/course/CoursewarePreview.vue

@@ -7,17 +7,18 @@
 
     <div style="width:100%">
       <a-row>
-        <a-col :span="6" :push="18">
-          <!-- 这里放文件名称...... -->
-          <div>
-            <h1 style="margin-bottom:18px;">文件名称</h1>
-            <h1>哈哈哈</h1>
-
-          </div>
-        </a-col>
-        <a-col :span="18" :pull="6">
+        <a-col :span="14">
           <!-- 这里面对应放视频 -->
-          <h1>视频视频视频</h1>
+          <!-- <h1>视频视频视频</h1> -->
+          <video-player
+            class="vjs-custom-skin"
+            ref="videoPlayer"
+            :options="playerOptions"
+            :playsinline="true"
+          >
+          </video-player>
+        </a-col>
+        <a-col :span="10" style="flex-shrink: 0;">
         </a-col>
       </a-row>
     </div>
@@ -25,29 +26,52 @@
 </template>
 
 <script>
+import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+import { videoPlayer } from 'vue-video-player'
 import { coursewareDeatil } from '@/api/course/courseware'
 
 export default {
-  components: {},
+  components: { videoPlayer },
   data() {
     return {
       queryParam: { id: this.$route.query.coursewareId },
-      courseware:[] //课件详情
+      courseware: [], //课件详情
+      playerOptions: {
+        // width: 800,
+        height: '360',
+        fluid: true,
+        autoplay: true,
+        muted: true,
+        language: 'en',
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [
+          {
+            type: 'video/mp4',
+            src: 'http://vjs.zencdn.net/v/oceans.mp4'
+          }
+        ],
+        poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
+      }
     }
   },
   created() {
     let parameter = {}
-    console.log("11111",this.queryParam);
-    coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
+    coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
       console.log(res)
-      this.courseware = res;
+      this.courseware = res
     })
   },
   methods: {
     //返回
     goback() {
       this.$router.push({ path: '/course/CourseList', query: {} })
-    },
-  },
+    }
+  }
 }
-</script>
+</script>
+<style lang="less" scoped>
+.vjs-custom-skin {
+  width: 100%;
+}
+</style>