feats

src/components/DownArrow.vue

@@ -28,7 +28,7 @@
 
     100% {
       transform: translateY(4vh);
-      opacity: 0;
+      opacity: .1;
     }
   }
 </style>

src/pages/pg1/video.vue

@@ -5,20 +5,21 @@
         <GoBack />
       </div>
     </Teleport>
-    <video
-      webkit-playsinline
-      playsinline
-      preload="auto"
-      autoplay="autoplay"
-      controls="controls"
-      x5-video-player-type="h5"
-      x5-video-orientation="landscape"
-      x5-video-player-fullscreen="false"
-      poster="/images/pg1/videocover.jpg"
-      ref="mediaRef"
-      src="/video/9年活动.mp4"
-      @click="onVidClick"
-    ></video>
+    <div class="video-wrapper">
+      <video
+        webkit-playsinline
+        playsinline
+        preload="auto"
+        controls="controls"
+        x5-video-player-type="h5"
+        x5-video-orientation="landscape"
+        x5-video-player-fullscreen="false"
+        poster="/images/pg1/videocover.jpg"
+        ref="mediaRef"
+        src="/video/9年活动.mp4"
+        @click="onVidClick"
+      >not support</video>
+    </div>
   </div>
 </template>
 
@@ -37,26 +38,26 @@ const controls = ref();
 onMounted(() => {
   pause();
 
-  // 自动播放
-  try {
-    const t = setTimeout(() => {
-      clearTimeout(t);
-
-      // 可能抛出异步异常
-      const p = mediaRef.value.play();
-      if (p) {
-        p.then(() => {
-          mediaRef.value.play();
-        }).catch((err) => {
-          console.log("--play-err---", err);
-          controls.value = "controls";
-        });
-      }
-    }, 300);
-  } catch (err) {
-    console.log("---err---", err);
-    controls.value = "controls";
-  }
+  // // 自动播放
+  // try {
+  //   const t = setTimeout(() => {
+  //     clearTimeout(t);
+
+  //     // 可能抛出异步异常
+  //     const p = mediaRef.value.play();
+  //     if (p) {
+  //       p.then(() => {
+  //         mediaRef.value.play();
+  //       }).catch((err) => {
+  //         console.log("--play-err---", err);
+  //         controls.value = "controls";
+  //       });
+  //     }
+  //   }, 300);
+  // } catch (err) {
+  //   console.log("---err---", err);
+  //   controls.value = "controls";
+  // }
 
   
   // // 自动全屏
@@ -111,9 +112,15 @@ onMounted(() => {
     top: 10px;
   }
 
-  video {
+  .video-wrapper {
+    position: relative;
     flex: none;
     width: 90%;
+    height: 90%;
+  }
+
+  video {
+    width: 100%;
   }
 }
 </style>