bug fix: safari中视频无法自动播放

src/views/BannerView.vue

@@ -24,6 +24,14 @@
       @ended="onEnded"
     />
 
+    <button
+      v-if="isShowPlayBtn"
+      class="banner-video__play"
+      @click="onClickPlayVideo"
+    >
+      播放
+    </button>
+
     <div
       class="banner-video__skip"
       @click="onEnded"
@@ -52,6 +60,11 @@ const VIDEO_MAP = [
   'csbwg.mp4'
 ]
 
+const isShowPlayBtn = ref($isSafari.value)
+function onClickPlayVideo() {
+  startupVideoRef.value.play()
+  isShowPlayBtn.value = false
+}
 const onEnded = () => {
   switch (checkedIdx) {
   case 0:
@@ -80,9 +93,6 @@ onMounted(() => {
   bannerIframe.value.contentWindow.OnClickScene = function(v) {
     videoUrl.value = VIDEO_MAP[v]
     showVideo.value = true
-    nextTick(() => {
-      startupVideoRef.value.play()
-    })
     checkedIdx = v
   }
 })
@@ -115,6 +125,19 @@ onMounted(() => {
       display: none !important;
     }
   }
+  &__play{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+    color: white;
+    width: 117px;
+    height: 51px;
+    letter-spacing: 4px;
+    line-height: 42px;
+    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
+  }
   &__skip {
     position: absolute;
     right: 30px;