feat: 放大缩小功能

h5/src/components/vionPlayer/index.vue

@@ -90,6 +90,7 @@ export default {
 
 
       console.log('init-options', options);
       console.log('init-options', options);
       this._jessibuca = new window.JessibucaPro(options);
       this._jessibuca = new window.JessibucaPro(options);
+      console.log('_jessibuca', this._jessibuca);
 
 
       this.registerEvent(this._jessibuca);
       this.registerEvent(this._jessibuca);
 
 
@@ -135,6 +136,8 @@ export default {
         console.log('playbackSeek', data);
         console.log('playbackSeek', data);
         // jessibuca.setPlaybackStartTime(data.ts);
         // jessibuca.setPlaybackStartTime(data.ts);
       });
       });
+
+      // 电子放大
     },
     },
     setForward(rate) {
     setForward(rate) {
       this._jessibuca.forward(rate);
       this._jessibuca.forward(rate);
@@ -160,6 +163,16 @@ export default {
       // 传入参数 优先级 大于属性
       // 传入参数 优先级 大于属性
       return status || this.isPlayback;
       return status || this.isPlayback;
     },
     },
+    // true 放大，false 缩小
+    zoom(direction = true) {
+      // temp1.player.zoom.expandPrecision()
+      const targetPlayer = this._jessibuca.player;
+      // zooming 表示处于电子放大状态
+      if (targetPlayer && targetPlayer.zooming && targetPlayer.zoom) {
+        if (direction) targetPlayer.zoom.expandPrecision();
+        else targetPlayer.zoom.narrowPrecision();
+      }
+    },
 
 
     // 暴露方法
     // 暴露方法
     play(url, isPlayback = false) {
     play(url, isPlayback = false) {

h5/src/views/player/vionPlayerDemo.vue

@@ -23,6 +23,8 @@
       <button @click="handleRotate">旋转</button>
       <button @click="handleRotate">旋转</button>
       <button @click="handleScreenshot">抓拍</button>
       <button @click="handleScreenshot">抓拍</button>
       <button @click="handleScreenshot2">抓拍(原)</button>
       <button @click="handleScreenshot2">抓拍(原)</button>
+      <button @click="handleZoom(true)">放大</button>
+      <button @click="handleZoom(false)">缩小</button>
       <div class="record">
       <div class="record">
         <input type="text" v-model="recordUrl">
         <input type="text" v-model="recordUrl">
         <button @click="handleRecord">录像</button>
         <button @click="handleRecord">录像</button>
@@ -99,6 +101,9 @@ export default {
       console.log('handleRotate');
       console.log('handleRotate');
       this.$refs.vionPlayer.rotate();
       this.$refs.vionPlayer.rotate();
     },
     },
+    handleZoom(direction) {
+      this.$refs.vionPlayer.zoom(direction);
+    },
 
 
     handlePtz(arrow) {
     handlePtz(arrow) {
       console.log('handlePtz', arrow);
       console.log('handlePtz', arrow);
@@ -144,6 +149,7 @@ export default {
       > button {
       > button {
         margin-left: 2px;
         margin-left: 2px;
       }
       }
+
     }
     }
   }
   }
   ::v-deep(.el-dialog__body) {
   ::v-deep(.el-dialog__body) {