feat: 播放器显隐控制

h5/src/views/player/vionPlayerDemo.vue

 <template>
 <template>
   <div class="j-player-demo">
   <div class="j-player-demo">
     <div class="player-content">
     <div class="player-content">
-      <!-- :play-url="playUrl" -->
-      <vion-player ref="vionPlayer"
+      <vion-player v-if="playerVisible"
+        ref="vionPlayer"
         :type="playerType"
         :type="playerType"
+        :play-url="playUrl"
         :datetime-range="datetimeRange"
         :datetime-range="datetimeRange"
         watermarkText="文安智能123"
         watermarkText="文安智能123"
         @ptz-control="handlePtz"
         @ptz-control="handlePtz"
@@ -16,6 +17,7 @@
       </div>
       </div>
       <!-- <button @click="handleLive">直播</button> -->
       <!-- <button @click="handleLive">直播</button> -->
       <!-- <button @click="handlePlayback">回放</button> -->
       <!-- <button @click="handlePlayback">回放</button> -->
+      <button @click="handleShow">展示</button>
       <button @click="handlePause">暂停</button>
       <button @click="handlePause">暂停</button>
       <button @click="handleStop">停止</button>
       <button @click="handleStop">停止</button>
       <button @click="handleDestroy">销毁</button>
       <button @click="handleDestroy">销毁</button>
@@ -41,6 +43,7 @@ export default {
       playerType: 'live',
       playerType: 'live',
       datetimeRange: [],
       datetimeRange: [],
 
 
+      playerVisible: false,
       dialogVisible: false,
       dialogVisible: false,
       base64Url: '',
       base64Url: '',
 
 
@@ -53,6 +56,9 @@ export default {
       const url = this.playUrl;
       const url = this.playUrl;
       this.$refs.vionPlayer.play(url);
       this.$refs.vionPlayer.play(url);
     },
     },
+    handleShow() {
+      this.playerVisible = true;
+    },
     handleLive() {
     handleLive() {
       this.playerType = 'live';
       this.playerType = 'live';
     },
     },