feat: 增加录像示例

h5/src/views/player/vionPlayerDemo.vue

@@ -4,7 +4,6 @@
       <!-- :play-url="playUrl" -->
       <vion-player v-if="playerVisible"
         ref="vionPlayer"
-        :type="playerType"
         :datetime-range="datetimeRange"
         watermarkText="文安智能123"
         @ptz-control="handlePtz"
@@ -16,12 +15,15 @@
         <button @click="handlePlay">播放</button>
       </div>
       <!-- <button @click="handleLive">直播</button> -->
-      <!-- <button @click="handlePlayback">回放</button> -->
       <!-- <button @click="handleShow">展示</button> -->
       <button @click="handlePause">暂停</button>
       <button @click="handleStop">停止</button>
       <button @click="handleDestroy">销毁</button>
       <button @click="handleScreenshot">抓拍</button>
+      <div class="record">
+        <input type="text" v-model="recordUrl">
+        <button @click="handleRecord">录像</button>
+      </div>
     </div>
 
     <el-dialog title="Image" :visible.sync="dialogVisible" width="90%">
@@ -40,7 +42,6 @@ export default {
   },
   data() {
     return {
-      playerType: 'live',
       datetimeRange: [],
 
       playerVisible: true,
@@ -49,6 +50,7 @@ export default {
 
       // 播放器相关
       playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_1_1.flv?expire=1695279265&id=624619383494283264&t=75ae0260690eedd9d493ab1caf716fe3f10a3e4c9b6df59135e032d437cf187a&ev=100&supportH265=1',
+      recordUrl: 'https://rtmp01open.ys7.com:9188/v3/openpb/F16423875_1_1.flv?begin=20230919103030&end=20230919113030&expire=1695289270&id=624661345092866048&rec=local&t=53368acd4fe795901a25cc1f85e212040abd6d816d5d7154fc61cff27285b81a&ev=100&supportH265=1',
     }
   },
   methods: {
@@ -59,15 +61,8 @@ export default {
     handleShow() {
       this.playerVisible = true;
     },
-    handleLive() {
-      this.playerType = 'live';
-    },
-    handlePlayback() {
-      this.playerType = 'playback';
-      this.datetimeRange = [
-        '1693904400000',
-        '1693908000000',
-      ];
+    handleRecord() {
+      this.$refs.vionPlayer.play(this.recordUrl);
     },
     handleScreenshot() {
       this.$refs.vionPlayer.screenshot().then(data => {
@@ -121,6 +116,13 @@ export default {
     > button {
       margin-right: 10px;
     }
+
+    > div.record {
+      margin-top: 10px;
+      > button {
+        margin-left: 2px;
+      }
+    }
   }
   ::v-deep(.el-dialog__body) {
     text-align: center;