feat: 播放视频源成功

Tianqing Liu
Commit 94640d58 authored Sep 19, 2023 by Tianqing Liu
Showing 6 changed files with 93 additions and 8 deletions
h5/public/index.html
h5/public/jessibuca/decoder.js
h5/public/jessibuca/decoder.wasm
h5/public/jessibuca/jessibuca.js
h5/src/components/vionPlayer/index.vue
h5/src/views/player/vionPlayerDemo.vue
--- a/h5/public/index.html
+++ b/h5/public/index.html
@@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="./jessibuca/jessibuca.js"></script>
  </head>
  <body>
    <noscript>

--- a/h5/public/jessibuca/decoder.js
+++ b/h5/public/jessibuca/decoder.js
--- a/h5/public/jessibuca/decoder.wasm
+++ b/h5/public/jessibuca/decoder.wasm
--- a/h5/public/jessibuca/jessibuca.js
+++ b/h5/public/jessibuca/jessibuca.js
--- a/h5/src/components/vionPlayer/index.vue
+++ b/h5/src/components/vionPlayer/index.vue
@@ -4,7 +4,70 @@
 <script>
 export default {
- name: 'VionPlayer',
+  name: 'VionPlayer',
+  data() {
+    return {
+      // eslint-disable-next-line
+      _jessibuca: null,
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods:{
+    init(params = {}) {
+      const options = Object.assign({
+        container: this.$refs.container,
+        decoder: './jessibuca/decoder.js',
+        isResize: false,
+        text: '', // TODO: 功能暂不清楚
+        useMSE: false,
+        useWCS: false,
+        isNotMute: false,
+        timeout: 10,
+        debug: true, // 是否开启控制台调试打印
+        // 按钮和界面
+        loadingText: '加载中...',
+        controlAutoHide: false,
+        supportDblclickFullscreen: false,
+        showBandwidth: false, // 显示网速
+        operateBtns: {
+          fullscreen: true,
+          screenshot: false,
+          play: true,
+          audio: true,
+        },
+      });
+      this._jessibuca = new window.Jessibuca(options);
+      this.registerEvent(this._jessibuca);
+    },
+    registerEvent(playerIns) {
+      playerIns.on("log", msg => {
+        console.log("on-log", msg);
+      });
+    },
+    // 暴露方法
+    play(url) {
+      if (url) {
+        this._jessibuca.play(url);
+      } else {
+        console.error('The url is not valid');
+      }
+    },
+    pause() {
+      this._jessibuca.pause();
+    },
+    destroy() {
+      if (this._jessibuca) {
+        this._jessibuca.destroy();
+      }
+      this.init();
+    },
+  },
 }
 </script>

--- a/h5/src/views/player/vionPlayerDemo.vue
+++ b/h5/src/views/player/vionPlayerDemo.vue
 <template>
  <div class="j-player-demo">
    <div class="player-content">
-      <vion-player ref="vionPlay"
+      <vion-player ref="vionPlayer"
        :type="playerType"
        prefix-url=""
        player-address="52.130.155.147"
@@ -11,10 +11,15 @@
      />
    </div>
    <div class="footer">
-      <button @click="handleLive">直播</button>
+      <div class="play">
-      <button @click="handlePlayback">回放</button>
+        <input type="text" v-model="playUrl">
+        <button @click="handlePlay">播放</button>
+      </div>
+      <!-- <button @click="handleLive">直播</button> -->
+      <!-- <button @click="handlePlayback">回放</button> -->
+      <button @click="handlePause">暂停</button>
      <button @click="handleStop">停止</button>
-      <button @click="handleScreenshot">抓拍</button>
+      <!-- <button @click="handleScreenshot">抓拍</button> -->
    </div>
  </div>
 </template>
@@ -31,9 +36,16 @@ export default {
    return {
      playerType: 'live',
      datetimeRange: [],
+      // 播放器相关
+      playUrl: 'https://xyrtmp.ys7.com:9188/v3/openlive/33011015992467054043:33010285991117359447_1_1.flv?expire=1695197391&id=624275978952122369&t=5d6125d91a189547ecc984fd4f153abea9dbf72b6bc77a88c7d5e6054ae7df48&ev=100&devProto=gb28181&supportH265=1',
    }
  },
  methods: {
+    handlePlay() {
+      const url = this.playUrl;
+      this.$refs.vionPlayer.play(url);
+    },
    handleLive() {
      this.playerType = 'live';
    },
@@ -45,13 +57,15 @@ export default {
      ];
    },
    handleScreenshot() {
-      this.$refs.jplay.screenshotWatermark().then(data => {
+      this.$refs.vionPlayer.screenshotWatermark().then(data => {
        console.log('handleScreenshot', data);
      });
    },
+    handlePause() {
+      this.$refs.vionPlayer.pause();
+    },
    handleStop() {
-      const result = this.$refs.jplay.stopPlay();
+      this.$refs.vionPlayer.destroy();
-      console.log('handleStop', result);
    },
  },
 }
@@ -73,6 +87,13 @@ export default {
  }
  > .footer {
    margin-top: 10px;
+    > div.play {
+      display: inline-block;
+      margin-right: 10px;
+      > button {
+        margin-left: 2px;
+      }
+    }
    > button {
      margin-right: 10px;
    }