feat(multi-player): 完善multi-player组件功能

c10342 · Apr 30, 2021 · abb6b7e · abb6b7e
1 parent 53da311
commit abb6b7e
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 19 deletions.
diff --git a/packages/multi-player/index.js b/packages/multi-player/index.js
@@ -1,5 +1,7 @@
 import MultiPlayer from './src/multi-player.js';
 
-MultiPlayer.install = (Vue) => Vue.component(MultiPlayer.name, MultiPlayer);
+MultiPlayer.install = (Vue) => {
+  Vue.prototype.$MultiPlayer = MultiPlayer;
+};
 
 export default MultiPlayer;
diff --git a/packages/multi-player/src/multi-player.js b/packages/multi-player/src/multi-player.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 import MultiPlayer from './multi-player.vue';
 
 import 'packages/multi-player/src/style.scss';
@@ -10,4 +12,99 @@ import 'packages/player-process/src/style.scss';
 
 import 'packages/player-volume/src/style.scss';
 
-export default MultiPlayer;
+import 'src/fonts/iconfont.css';
+
+import { handleEl } from 'packages/video-player/src/utils.js';
+
+const MultiPlayerConstructor = Vue.extend(MultiPlayer);
+
+// export default MultiPlayer;
+
+class LinMultiPlayer {
+  // 组件实例
+  instance = null;
+
+  // 插入容器
+  container = null;
+
+  // vue实例
+  vm = null;
+
+  // 视频列表
+  videoList = [];
+
+  // 视频类型
+  type = null;
+
+  // 是否为直播
+  live = false;
+
+  // 是否自动播放
+  autoplay = false;
+
+  // el元素，字符串或者DOM类型
+  el = null;
+
+  constructor(options) {
+    const { el } = options;
+    // 检验参数
+    handleEl(el);
+
+    // 初始化参数
+    this.initParams(options);
+    // 初始化播放器
+    this.initPlayer(options);
+  }
+
+  // 初始化参数
+  initParams(options) {
+    const {
+      el,
+      type,
+      autoplay = false,
+      videoList = [],
+      live = false
+    } = options;
+    this.videoList = videoList;
+    this.autoplay = autoplay;
+    this.type = type;
+    this.el = el;
+    this.live = live;
+  }
+
+  // 初始化播放器
+  initPlayer() {
+    this.instance = new MultiPlayerConstructor({
+      data: {
+        autoplay: this.autoplay,
+        videoList: this.videoList,
+        type: this.type,
+        live: this.live
+      }
+    });
+    // 初始化挂在的容器
+    if (typeof this.el === 'string') {
+      this.container = document.querySelector(this.el);
+    } else {
+      this.container = this.el;
+    }
+
+    // 渲染DOM
+    this.vm = this.instance?.$mount();
+
+    // 获取video标签
+    this.videos = this.instance?.playerList;
+
+    // 将dom添加进入容器
+    this.container?.appendChild(this.vm.$el);
+  }
+
+  // 事件监听
+  on(eventName, func) {
+    if (this.videos && this.videos[0]) {
+      this.videos[0].on(eventName, func);
+    }
+  }
+}
+
+export default LinMultiPlayer;
diff --git a/packages/multi-player/src/multi-player.vue b/packages/multi-player/src/multi-player.vue
@@ -112,20 +112,6 @@ export default {
     [NoScreen.name]: NoScreen,
     [MultiControls.name]: MultiControls
   },
-  props: {
-    videos: {
-      type: Array,
-      default: () => [
-        'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-        'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-        'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4'
-      ]
-    },
-    type: {
-      type: String,
-      default: 'mp4'
-    }
-  },
   data() {
     return {
       // 画面容器样式
@@ -190,7 +176,11 @@ export default {
       // 是否单个画面全屏
       isSingleFullscreen: false,
       // 那个画面全屏
-      singleFullscreenId: -1
+      singleFullscreenId: -1,
+      autoplay: false,
+      videoList: [],
+      type: 'mp4',
+      live: false
     };
   },
   mounted() {
@@ -494,11 +484,12 @@ export default {
     },
     // 初始化播放器
     initPlayer() {
-      for (let i = 0; i < this.videos.length; i++) {
-        const videoUrl = this.videos[i];
+      for (let i = 0; i < this.videoList.length; i++) {
+        const videoUrl = this.videoList[i];
         const player = new VideoPlayer({
           el: document.getElementById(`screen${i + 1}`),
           type: this.type,
+          autoplay: this.autoplay,
           videoList: [
             {
               label: '',