wg-video-player 1.0.0-beta.0 → 1.0.0-beta.2

package/examples/App.vue

@@ -1,55 +1,7 @@
 <template>
   <div class="demo grid">
     <div class="mvp-multi-player-container">
-      <div class="mvp-multi-player">
-        <multi-player
-          :enable-new="true"
-          :mode="targetMode"
-          :videos="videos"
-          :seekable="seekable"
-          :seek-warning="seekWarning"
-          :autoPlay="autoPlay"
-          :last-played="lastPlayed"
-          :plugins="plugins"
-          :custom-event-timestamps="timestamps"
-          :is-simple-controls="isSimpleControls"
-          :enable-play-rate="enablePlayRate"
-          @playerReady="playerReady"
-        />
-      </div>
-      <div class="mvp-multi-player-log" v-if="false">
-        <div class="video-log">
-          <div class="video-title">{{ '多路视频log' }}</div>
-          <div class="log-content">
-            <div v-if="targetMode === 'replay'" class="log">
-              <div>{{ '播放器基本属性：' }}</div>
-              <div class="log-view">
-                <p>{{ '当前时间：' + currentTime }}</p>
-                <p>{{ '视频时长：' + duration }}</p>
-                <p>{{ '音量：' + volumeView }}</p>
-                <p>
-                  {{ '倍速:' + playerRate.rate + ' 时间点:' + playerRate.position }}
-                </p>
-              </div>
-            </div>
-            <div class="log">
-              <div>{{ '播放器状态追踪' }}</div>
-              <div class="log-view" ref="stateLog">
-                <div class="single-log-view" v-for="(log, index) in playerStatusLogs" :key="index">
-                  <span>{{ '时间戳:' + log.timestamp }}</span>
-                  <br />
-                  <span>{{ '视频时间点:' + log.position }}</span>
-                  <br />
-                  <span>{{ '状态变更:' + log.msg }}</span>
-                  <br />
-                  <span v-if="targetMode === 'live'">{{ '视频Index:' + log.videoIndex }}</span>
-                  <br />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <div class="mvp-multi-player" id="wg-player-demo"></div>
     </div>
     <div class="mvp-i18n-test">
       <div class="button" @click="paused = true" v-if="targetMode === 'replay'">暂停视频</div>
@@ -74,13 +26,15 @@
 <script>
 import { secondsToHms } from '@/utils/time-format';
 import fakeData from './fakeData';
+import { WgVideoPlayer } from '@/index';
+import '@/styles/index.scss';
 
 export default {
   data() {
     const autoPlay = false;
     const lastPlayed = 0;
     return {
-      multiPlayer: null,
+      wgVideoPlayer: null,
       plugins: fakeData.plugins,
       isSimpleControls: false,
       targetMode: 'replay',
@@ -113,10 +67,6 @@ export default {
     videos() {
       return this.targetMode === 'replay' ? fakeData.replayVideos : fakeData.liveVideos;
     },
-    multiPlayerListeners() {
-      const commonListeners = { ...this.$listeners, ...this.trackListeners };
-      return this.targetMode === 'replay' ? { ...this.pluginListeners, ...commonListeners } : commonListeners;
-    },
     currentTime() {
       return secondsToHms(this.playerAttrLog.currentTime);
     },
@@ -127,61 +77,108 @@ export default {
       return Math.floor(this.playerAttrLog.volume * 100) / 100;
     },
   },
+  mounted() {
+    this.wgVideoPlayer = new WgVideoPlayer('wg-player-demo', {
+      videos: this.videos,
+      mode: this.targetMode,
+      seekable: this.seekable,
+      seekWarning: this.seekWarning,
+      autoPlay: this.autoPlay,
+      lastPlayed: this.lastPlayed,
+      isSimpleControls: this.isSimpleControls,
+      enablePlayRate: this.enablePlayRate,
+      plugins: this.getPlugins(),
+    });
+    this.wgVideoPlayer.on('playerReady', this.playerReady);
+    this.wgVideoPlayer.on('playerError', () => {
+      window.alert('播放失败!!');
+    });
+    this.wgVideoPlayer.on('timeupdate', ({ player }) => {
+      console.log(player.currentTime, this.wgVideoPlayer.currentTime);
+    });
+  },
   methods: {
-    playerReady(multiPlayer) {
-      this.multiPlayer = multiPlayer;
-      // this.multiPlayer.toggleVolume();
-      if (this.targetMode === 'live') {
-        this.multiPlayer.startSyncPlayers();
-        console.log('player ready ............');
-      }
-      multiPlayer.configPlugin('caption', {
-        toggle: true,
-        mediaId: '852e07a579984725aabd78a0a52b2ec8',
-        server: 'https://incast-uat.tronclass.com.cn',
-        source:
-          'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==',
-        organization: 'wisdomgarden-uat',
-        callback: '',
-        downloadUrl: '',
-        permissions: {
-          create: true,
-          upload: true,
+    getPlugins() {
+      return {
+        liveCaption: {
+          toggle: false,
+          server: 'http://localhost:21082',
+          deviceCode: 'livestream',
         },
-      });
-      multiPlayer.configPlugin('liveCaption', {
-        toggle: false,
-        server: 'http://localhost:21082',
-        deviceCode: 'livestream',
-      });
-      multiPlayer.configPlugin('topic', {
-        toggle: true,
-        mediaId: '852e07a579984725aabd78a0a52b2ec8',
-        server: 'https://incast-uat.tronclass.com.cn',
-        callback: 'http://localhost:8088/api/media-topic/callback',
-        organization: 'wisdomgarden-uat',
-        lang: 'zh-CN',
-        aiTopic: {
+        caption: {
           toggle: true,
-          category: '生物', // 知识点大类，一般是课程名称
-          asrInput:
-            'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==', // 用来做asr分析的视频下载地址
-          ocrInput:
-            'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==', // 用来做ocr分析的视频下载地址
+          mediaId: '852e07a579984725aabd78a0a52b2ec8',
+          server: 'https://incast-uat.tronclass.com.cn',
+          source:
+            'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==',
+          organization: 'wisdomgarden-uat',
+          callback: '',
+          downloadUrl: '',
           permissions: {
-            manage: ['generate', 'delete', 'transfer', 'publish', 'recover'],
-            view: ['all'],
+            create: true,
+            upload: true,
           },
         },
-        manualTopic: {
+        topic: {
+          toggle: false,
+          mediaId: '852e07a579984725aabd78a0a52b2ec8',
+          server: 'https://incast-uat.tronclass.com.cn',
+          callback: 'http://localhost:8088/api/media-topic/callback',
+          organization: 'wisdomgarden-uat',
+          lang: 'zh-CN',
+          aiTopic: {
+            toggle: true,
+            category: '生物', // 知识点大类，一般是课程名称
+            asrInput:
+              'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==', // 用来做asr分析的视频下载地址
+            ocrInput:
+              'ilesson://ilesson?download_url=aHR0cDovL2xvY2FsaG9zdDo4MDAyL3ZpZGVvcy9ST09NXzNfVklERU8vMjAxOTEwMDEvMDgwMDAwLTA4NDUwMC9jYW1fZW5jb2Rlcg==', // 用来做ocr分析的视频下载地址
+            permissions: {
+              manage: ['generate', 'delete', 'transfer', 'publish', 'recover'],
+              view: ['all'],
+            },
+          },
+          manualTopic: {
+            permissions: {
+              manage: ['create', 'delete', 'update'],
+              view: ['all'],
+            },
+          },
+        },
+        note: {
+          toggle: false,
+          // server: 'http://notabene.uat.tronclass.com.cn:18888',
+          token:
+            'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOiJVMDAwMyIsImRpc3BsYXlfbmFtZSI6IlNoYXduIiwidXJpIjoidXJuOnRyb25jYXN0OnJlcGxheTo3MDcyOGI0ZDkxYjE0ZGJjYTY4OGY0ZTcyYjI3NzlmNyIsInNlcnZlciI6Imh0dHA6Ly9ub3RhYmVuZS51YXQudHJvbmNsYXNzLmNvbS5jbjoxODg4OCIsInN0b3JhZ2UiOnsidHlwZSI6Ik1FRElBIiwic2VydmVyIjoiaHR0cDovL2xvY2FsaG9zdDo4MDAxIiwic2VjcmV0IjoiaW5zZWN1cmUgc2VjcmV0IGtleSJ9fQ.1zJnhWPcBqKfW7W6GbYYTPKfSDJX5Eb7zf-iLOENTus',
           permissions: {
             manage: ['create', 'delete', 'update'],
+            view: ['public', 'myself'],
+          },
+        },
+        ppt: {
+          toggle: true,
+          mediaId: 'media-1',
+          server: 'http://localhost:8088',
+          source:
+            'https://minio.tronclass.com.cn/outbound/wisdomgarden/ARTS403/20230908/150000-150500-1694160880354/INSTRUCTOR-d2lzZG9tZ2FyZGVuLUFSVFM0MDMtRGV2aWNlTGFiZWwuSU5TVFJVQ1RPUi0xLTE2OTQxNTkzMTAxODM-.mp4?response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27INSTRUCTOR-d2lzZG9tZ2FyZGVuLUFSVFM0MDMtRGV2aWNlTGFiZWwuSU5TVFJVQ1RPUi0xLTE2OTQxNTkzMTAxODM-.mp4&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=YBQUE8NVWSQGSEZRNDUK%2F20231016%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231016T081119Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cbe69b3ce042afada1b6a931ff725de0a43d322240aec075c084a1b4c52e4d1a',
+          organization: 'wisdomgarden',
+          callback: '',
+          permissions: {
+            manage: ['create', 'delete', 'update', 'ai-generate'],
             view: ['all'],
           },
         },
-      });
-      multiPlayer.configPlugin('switcher', { toggle: true });
-      multiPlayer.configPlugin('controller', {
+      };
+    },
+    playerReady({ player }) {
+      // this.multiPlayer.toggleVolume();
+      if (this.targetMode === 'live') {
+        player.startSyncPlayers();
+        console.log('player ready ............');
+      }
+      // TODO 需要重新初始化下面的 plugins
+      player.configPlugin('switcher', { toggle: true });
+      player.configPlugin('controller', {
         toggle: false,
         server: 'http://localhost:8088',
         mediaId: '94',
@@ -190,45 +187,22 @@ export default {
           manage: ['live', 'record', 'stop'],
         },
       });
-      multiPlayer.configPlugin('waterMark', {
+      player.configPlugin('waterMark', {
         toggle: true,
         text: 'U00001',
       });
-      multiPlayer.configPlugin('chat', {
+      player.configPlugin('chat', {
         toggle: false,
         server: 'http://localhost:5030',
         token:
           'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX25vIjoiMiIsInVzZXJfbmFtZSI6Ilx1NzUyOFx1NjIzNzIiLCJyb29tX2lkIjoxLCJyb29tX25hbWUiOiJCaWdfUm9vbSIsInJvbGUiOiJzdHVkZW50IiwiZXhwIjoxNjMyOTg4MDQ0fQ.wZXwoyXYbNwdUczPU_9ufhhbtMLtozCxEYk6evRd5xs',
       });
-      multiPlayer.configPlugin('note', {
-        toggle: true,
-        // server: 'http://notabene.uat.tronclass.com.cn:18888',
-        token:
-          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOiJVMDAwMyIsImRpc3BsYXlfbmFtZSI6IlNoYXduIiwidXJpIjoidXJuOnRyb25jYXN0OnJlcGxheTo3MDcyOGI0ZDkxYjE0ZGJjYTY4OGY0ZTcyYjI3NzlmNyIsInNlcnZlciI6Imh0dHA6Ly9ub3RhYmVuZS51YXQudHJvbmNsYXNzLmNvbS5jbjoxODg4OCIsInN0b3JhZ2UiOnsidHlwZSI6Ik1FRElBIiwic2VydmVyIjoiaHR0cDovL2xvY2FsaG9zdDo4MDAxIiwic2VjcmV0IjoiaW5zZWN1cmUgc2VjcmV0IGtleSJ9fQ.1zJnhWPcBqKfW7W6GbYYTPKfSDJX5Eb7zf-iLOENTus',
-        permissions: {
-          manage: ['create', 'delete', 'update'],
-          view: ['public', 'myself'],
-        },
-      });
-      multiPlayer.configPlugin('ppt', {
-        toggle: true,
-        mediaId: 'media-1',
-        server: 'http://localhost:8088',
-        source:
-          'https://minio.tronclass.com.cn/outbound/wisdomgarden/ARTS403/20230908/150000-150500-1694160880354/INSTRUCTOR-d2lzZG9tZ2FyZGVuLUFSVFM0MDMtRGV2aWNlTGFiZWwuSU5TVFJVQ1RPUi0xLTE2OTQxNTkzMTAxODM-.mp4?response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27INSTRUCTOR-d2lzZG9tZ2FyZGVuLUFSVFM0MDMtRGV2aWNlTGFiZWwuSU5TVFJVQ1RPUi0xLTE2OTQxNTkzMTAxODM-.mp4&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=YBQUE8NVWSQGSEZRNDUK%2F20231016%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231016T081119Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cbe69b3ce042afada1b6a931ff725de0a43d322240aec075c084a1b4c52e4d1a',
-        organization: 'wisdomgarden',
-        callback: '',
-        permissions: {
-          manage: ['create', 'delete', 'update', 'ai-generate'],
-          view: ['all'],
-        },
-      });
     },
     closePlayer() {
-      this.multiPlayer.close();
+      this.wgVideoPlayer.close();
     },
     openPlayer() {
-      this.multiPlayer.open();
+      this.wgVideoPlayer.open();
     },
     changeMode(mode) {
       this.targetMode = mode;
@@ -252,9 +226,10 @@ export default {
   .mvp-multi-player-container {
     display: flex;
     height: 600px;
+    width: 100%;
 
     .mvp-multi-player {
-      width: 1160px;
+      width: 70%;
     }
 
     .mvp-multi-player-log {

package/examples/fakeData.js

@@ -598,13 +598,6 @@ const plugins = {
       console.log('download click');
     },
   },
-  caption: {
-    toggle: false,
-    captionUrl: '',
-  },
-  liveCaption: {
-    toggle: true,
-  },
   clip: {
     toggle: true,
     server: 'http://www.baidu.com',

package/examples/main.js

@@ -1,16 +1,11 @@
-// import Vue from 'vue';
 import { createApp } from 'vue';
-// import VueI18n from 'vue-i18n';
 import { createI18n } from 'vue-i18n';
 import App from './App.vue';
-import multiPlayer from '../src/index';
-
-// Vue.use(VueI18n);
 
 const messages = {
-  tw: { message: '視頻', ...multiPlayer.langs.tw },
-  cn: { message: '视频', ...multiPlayer.langs.cn },
-  us: { message: 'video', ...multiPlayer.langs.us },
+  tw: { message: '視頻' },
+  cn: { message: '视频' },
+  us: { message: 'video' },
 };
 const i18n = createI18n({
   locale: 'cn',
@@ -19,14 +14,6 @@ const i18n = createI18n({
 
 const app = createApp(App);
 
-app.use(multiPlayer);
 app.use(i18n);
 
 app.mount('#app');
-// eslint-disable-next-line no-new
-// new Vue({
-//   el: '#app',
-//   render: (h) => h(App),
-//   i18n,
-// });
-// import '../src/test';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wg-video-player",
   "description": "A video player for private",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "author": "wg <wg@wisdomgarden.com>",
   "license": "MIT",
   "private": false,
@@ -34,6 +34,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@popperjs/core": "^2.11.8",
     "@silvermine/videojs-quality-selector": "^1.3.0",
+    "@vueuse/core": "^10.5.0",
     "ant-design-vue": "^4.0.6",
     "axios": "^1.5.1",
     "chance": "^1.1.11",

package/wg-video-player.d.ts

@@ -1,52 +1,44 @@
-import { PluginFunction } from 'vue';
-
 declare module 'wg-video-player';
 
-export interface MultiPlayerProps {
+declare interface WgVideoPlayerProps {
     videos: Record<string, any>[]
     mode?: string
     volume?: number
-    plugins?: Record<string, any>
     autoPlay?: boolean
     seekable?: boolean
     seekWarning?: string
     lastPlayed?: number
     isSimpleControls?: boolean
     enablePlayRate?: boolean
-    enableNew?: boolean
-    onPlayerReady: Function,
-    onError: Function
+    plugins: Record<string, any>
 }
 
 export type ListenerName = 'playerReady' | 'error'
 
 export type VideoLanguage = 'cn' | 'tw' | 'us'
 
-export class MultiPlayer {
-    playerComponent: Record<string, any>
-    constructor(id: string, props: MultiPlayerProps, options?: Record<string, any>) { }
+export class WgVideoPlayer {
+
+    duration: number
+
+    constructor(id: string, props: WgVideoPlayerProps, options?: Record<string, any>)
+
+    get currentTime(): number
+    set currentTime(currentTime: number)
+
+    on(eventName: string, eventHandler: Function): void
+
+    off(eventName: string): void
 
-    // on(
-    //     fnName: ListenerName,
-    //     fn: Function,
-    // ): void
+    play(): void
 
-    // off(
-    //     fnName: ListenerName,
-    //     fn: Function,
-    // ): void
+    pause(): void
+
+    open(): void
+
+    close(): void
 
     locale(language: VideoLanguage): void
 
     destroy(): void
 }
-
-const API: {
-    locale: Function,
-    i18n: Function,
-    langs: Record<string, any>,
-    install: PluginFunction<any>,
-    MultiPlayer: MultiPlayer,
-}
-
-export default API;