wg-video-player 1.0.0-beta.0

package/examples/App.vue

@@ -0,0 +1,341 @@
+<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>
+    <div class="mvp-i18n-test">
+      <div class="button" @click="paused = true" v-if="targetMode === 'replay'">暂停视频</div>
+      <div class="button" @click="paused = false" v-if="targetMode === 'replay'">播放视频</div>
+    </div>
+    <div class="mvp-i18n-test">
+      <div class="button" @click="changeMode('replay')">录播模式</div>
+      <div class="button" @click="changeMode('live')">直播模式</div>
+    </div>
+    <div class="mvp-i18n-test">
+      <div class="button" @click="closePlayer">关闭播放器</div>
+      <div class="button" @click="openPlayer">打开播放器</div>
+    </div>
+    <div class="mvp-i18n-test">
+      <div class="button" @click="changeLocale('cn')">简体中文</div>
+      <div class="button" @click="changeLocale('tw')">繁体中文</div>
+      <div class="button" @click="changeLocale('us')">英文</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { secondsToHms } from '@/utils/time-format';
+import fakeData from './fakeData';
+
+export default {
+  data() {
+    const autoPlay = false;
+    const lastPlayed = 0;
+    return {
+      multiPlayer: null,
+      plugins: fakeData.plugins,
+      isSimpleControls: false,
+      targetMode: 'replay',
+      videoLogs: {},
+      playerAttrLog: {
+        currentTime: 0,
+        duration: 0,
+        volume: 0,
+      },
+      playerRate: {
+        rate: 1,
+        position: 0,
+      },
+      playerStatusLogs: [],
+      seekable: true,
+      seekWarning: '老师已设置观看该视频时不能快进',
+      enablePlayRate: true,
+      lastThreshold: lastPlayed + 30,
+      autoPlay,
+      lastPlayed,
+      pausedAt: lastPlayed,
+      show: true,
+      show1: true,
+      paused: !autoPlay,
+      timestamps: [15, 20, 30],
+      current: 20,
+    };
+  },
+  computed: {
+    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);
+    },
+    duration() {
+      return secondsToHms(this.playerAttrLog.duration);
+    },
+    volumeView() {
+      return Math.floor(this.playerAttrLog.volume * 100) / 100;
+    },
+  },
+  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,
+        },
+      });
+      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: {
+          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'],
+          },
+        },
+      });
+      multiPlayer.configPlugin('switcher', { toggle: true });
+      multiPlayer.configPlugin('controller', {
+        toggle: false,
+        server: 'http://localhost:8088',
+        mediaId: '94',
+        organization: 'wisdomgarden',
+        permissions: {
+          manage: ['live', 'record', 'stop'],
+        },
+      });
+      multiPlayer.configPlugin('waterMark', {
+        toggle: true,
+        text: 'U00001',
+      });
+      multiPlayer.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();
+    },
+    openPlayer() {
+      this.multiPlayer.open();
+    },
+    changeMode(mode) {
+      this.targetMode = mode;
+    },
+    changeWordCloudSpacing(num) {
+      this.replayConfig.wordCloudSettings.spacing += num;
+    },
+    changeLocale(locale) {
+      this.$i18n.locale = locale;
+      this.$forceUpdate();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  width: 100%;
+  height: 100%;
+
+  .mvp-multi-player-container {
+    display: flex;
+    height: 600px;
+
+    .mvp-multi-player {
+      width: 1160px;
+    }
+
+    .mvp-multi-player-log {
+      margin-left: 20px;
+      width: 500px;
+      border: 1px solid #00bbbd;
+      display: flex;
+
+      .video-log {
+        border: 1px solid #00bbbd;
+        flex-grow: 1;
+        flex-shrink: 1;
+        display: flex;
+        flex-direction: column;
+
+        .video-title {
+          height: 40px;
+          font-size: 14px;
+          font-weight: bold;
+          border-bottom: 2px solid #00bbbd;
+        }
+
+        .log-content {
+          flex-grow: 1;
+          flex-shrink: 1;
+          overflow-y: auto;
+          white-space: pre;
+          display: flex;
+
+          .log {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid #00bbbd;
+
+            .log-view {
+              border-top: 2px solid grey;
+              height: 100%;
+              font-weight: bold;
+              overflow-y: auto;
+
+              .single-log-view {
+                border: 1px solid seagreen;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .mvp-i18n-test {
+    display: flex;
+    margin-top: 10px;
+    height: 40px;
+
+    .i18n-message {
+      margin-left: 20px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .mvp-word-cloud-test {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 70px;
+    margin-top: 10px;
+
+    .mvp-word-cloud-setting {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .button {
+    border: 1px solid #00bbbd;
+    margin-left: 20px;
+    padding: 5px 20px;
+    cursor: pointer;
+  }
+}
+</style>