feat: video元素

src/pages/index/index.jsx

@@ -23,6 +23,7 @@ import {
 import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
 import iphone from "../../images/iphone.jpg";
+import testmpkv from "../../images/test.mp4";
 
 const Index = () => {
   useEffect(() => {
@@ -43,6 +44,22 @@ const Index = () => {
       <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
       </View>
+
+      {/* video元素 */}
+      {/* <View className="index_video">
+        <video
+          id="my-player"
+          className="video_js"
+          controls
+          preload="auto"
+          poster="//vjs.zencdn.net/v/oceans.png"
+          data-setup="{}"
+        >
+          <source src={testmpkv} type="video/mp4"></source>
+        </video>
+      </View> */}
+
+      
     </View>
   );
 };

src/pages/index/index.scss

@@ -2,6 +2,10 @@
   width: 100vw;
   height: 100vh;
   // overflow: hidden; // 防止溢出
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   .index_backImg {
     width: 100%;
@@ -13,6 +17,23 @@
       height: 100%;
     }
   }
+
+  .index_video {
+    position: absolute;
+    top: 0px;
+    width: 400px;
+    height: 200px;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-content: center;
+    background-color: aqua;
+    .video_js {
+      width: 400px;
+      height: 200px;
+    }
+  }
+
 }
 
 
@@ -28,6 +49,10 @@
     // height: 100vh; // 使容器高度始终填满视口
     transform: rotate(-90deg) translate(-100vh, 0);
     transform-origin: top left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     .index_backImg {
       width: 100%;
@@ -43,6 +68,17 @@
       }
     }
 
+    .index_video {
+      position: absolute;
+      top: 0px;
+      width: 400px;
+      height: 200px;
+      .video_js {
+        width: 400px;
+        height: 200px;
+      }
+    }
+
 
   }