feat: 倍速回放功能

h5/src/components/vionPlayer/config.js

@@ -78,3 +78,16 @@ export function getMirrorRotate() {
     click: this.mirrorRotate,
   }
 }
+
+export function getPlaybackConfig() {
+  return {
+    controlType: 'simple',
+    showRateBtn: true,
+    rateConfig: [
+      { label: '0.5x', value: 0.5 },
+      { label: '1x', value: 1 },
+      { label: '2x', value: 2 },
+      { label: '4x', value: 4 },
+    ],
+  }
+}

h5/src/components/vionPlayer/index.vue

@@ -6,7 +6,7 @@
 import { merge } from 'lodash';
 // checkSupportMSEHevc checkSupportSIMD, checkSupportWCSHevc
 import { getWatermarkCanvasImg } from './utils';
-import { getPlayerConfig, getRotateConfig, getMirrorRotate } from './config';
+import { getPlayerConfig, getRotateConfig, getMirrorRotate, getPlaybackConfig } from './config';
 
 export default {
   name: 'VionPlayer',
@@ -27,6 +27,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    isPlayback: {
+      type: Boolean,
+      default: false,
+    },
     // 是否是小程序
 		isXCXPage: {
 		  type: Boolean,
@@ -115,27 +119,52 @@ export default {
         // console.log('ptz', arrow);
         this.$emit('ptz-control', arrow);
       });
+
+      // 改变倍速事件
+      playerIns.on('playbackPreRateChange', (rate) => {
+        // console.log('playbackPreRateChange', rate);
+        this.$emit('rate-change', rate, this.setForward);
+      });
+      // 点击时间轴跳转事件
+      playerIns.on('playbackSeek', (data) => {
+        console.log('playbackSeek', data);
+        // jessibuca.setPlaybackStartTime(data.ts);
+      });
+    },
+    setForward(rate) {
+      this._jessibuca.forward(rate);
     },
     getWatermarkBase64() {
       const data = getWatermarkCanvasImg(150, 48, '文安智能');
       console.log('getWatermarkBase64', data);
     },
-    delayPlay(url) {
+    delayPlay(url, isPlayback = false) {
       setTimeout(() => {
-        this._jessibuca.play(url);
+        if (isPlayback) {
+          this._jessibuca.playback(url, getPlaybackConfig());
+        } else {
+          this._jessibuca.play(url);
+        }
         this.playOriginUrl = url;
       }, 150);
     },
+    // 获取是否是回放状态
+    getPlaybackStatus(status) {
+      // 传入参数 优先级 大于属性
+      return status || this.isPlayback;
+    },
 
     // 暴露方法
-    play(url) {
+    play(url, isPlayback = false) {
       if (url) {
+        const playbackStatus = this.getPlaybackStatus(isPlayback);
         // 播放地址不同，则先停止再播放。地址相同，相当于暂停后，继续播放
-        if (this.playOriginUrl && this.playOriginUrl !== url) {
+        // 若是回放，则直接播放
+        if (!playbackStatus && this.playOriginUrl && this.playOriginUrl !== url) {
           // 切换视频流地址，先销毁当前实例，再创建新实例，避免内存溢出
           this.replay(url);
         } else {
-          this.delayPlay(url);
+          this.delayPlay(url, playbackStatus);
         }
       } else {
         console.error('The url is not valid');
@@ -224,6 +253,10 @@ export default {
   height: 100%;
   widows: 100%;
   background-color: rgba(13, 14, 27, 0.7);
+  // 时间轴
+  ::v-deep(.jessibuca-control-progress-simple) {
+    display: none;
+  }
 }
 .hide-controls {
   ::v-deep(.jessibuca-controls) {

h5/src/views/player/vionPlayerDemo.vue

@@ -7,6 +7,7 @@
         :datetime-range="datetimeRange"
         watermarkText="文安智能678"
         @ptz-control="handlePtz"
+        @rate-change="handleRateChange"
       />
     </div>
     <div class="footer">
@@ -51,9 +52,10 @@ export default {
       base64Url: '',
 
       // 播放器相关
-      playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_4_1.flv?expire=1695696850&id=626370860302729216&t=8c5be77f3d74149d2cdb93f913baf0c171bc33f8d6b6507510e8869b3392a4da&ev=100&supportH265=1',
+      playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_4_1.flv?expire=1695801507&id=626809821921091584&t=012b62efc1b531ada1d08aae3d374c4cb9cf999a87f38b298b52a14bbcc51883&ev=100&supportH265=1',
+      // playUrl: 'http://flv.bdplay.nodemedia.cn/live/bbb_264.flv',
       // playUrl: '',
-      recordUrl: '',
+      recordUrl: 'https://rtmp01open.ys7.com:9188/v3/openpb/F16423875_1_1.flv?begin=20230925113136&end=20230925182952&expire=1695724192&id=626485541843505152&rec=local&t=1a3147ede9f0c48ed31df986f8e1a24b39ebcebf0325c134bdae5d8bbda078f5&ev=100&supportH265=1',
     }
   },
   methods: {
@@ -69,7 +71,7 @@ export default {
       this.playerVisible = true;
     },
     handleRecord() {
-      this.$refs.vionPlayer.play(this.recordUrl);
+      this.$refs.vionPlayer.play(this.recordUrl, true);
     },
     handleScreenshot() {
       this.$refs.vionPlayer.screenshot().then(data => {
@@ -101,6 +103,11 @@ export default {
     handlePtz(arrow) {
       console.log('handlePtz', arrow);
     },
+    handleRateChange(rate, done) {
+      console.log('handleRateChange', rate, done);
+      // 请求接口，获取流地址
+      done(rate);
+    },
   },
 }
 </script>