feat: 增加背景图片展示

h5/src/components/vionPlayer/index.vue

@@ -3,6 +3,7 @@
     :data-player-type="this.playerType"
     :data-player-type="this.playerType"
     :class="containerClassName"
     :class="containerClassName"
   >
   >
+    <div v-if="previewStyles" class="vion-player-preview" :style="previewStyles"></div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -31,6 +32,7 @@ export default {
       type: Boolean,
       type: Boolean,
       default: true,
       default: true,
     },
     },
+    // 是否回放。true 表示直播回放
     isPlayback: {
     isPlayback: {
       type: Boolean,
       type: Boolean,
       default: false,
       default: false,
@@ -40,6 +42,11 @@ export default {
 		  type: Boolean,
 		  type: Boolean,
 		  default: false,
 		  default: false,
 		},
 		},
+    // 预览图片地址
+    previewUrl: {
+      type: String,
+      default: '',
+    },
   },
   },
   data() {
   data() {
     return {
     return {
@@ -64,6 +71,13 @@ export default {
       // if (this.playerType === 'playback') list.push('playback-status');
       // if (this.playerType === 'playback') list.push('playback-status');
       return list;
       return list;
     },
     },
+    previewStyles() {
+      if (this.previewUrl) {
+        return `background-image: url(${this.previewUrl});`
+      } else {
+        return null;
+      }
+    },
   },
   },
   mounted() {
   mounted() {
     this.init(this.playUrl);
     this.init(this.playUrl);
@@ -304,4 +318,10 @@ export default {
     display: none !important;
     display: none !important;
   }
   }
 }
 }
+.vion-player-preview {
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
 </style>
 </style>

h5/src/views/player/vionPlayerDemo.vue

@@ -6,6 +6,7 @@
         ref="vionPlayer"
         ref="vionPlayer"
         :datetime-range="datetimeRange"
         :datetime-range="datetimeRange"
         watermarkText="文安智能678"
         watermarkText="文安智能678"
+        preview-url="https://www.smartliu.top:2443/blog/themeauthor.jpg"
         @ptz-control="handlePtz"
         @ptz-control="handlePtz"
         @rate-change="handleRateChange"
         @rate-change="handleRateChange"
       />
       />