H5
/
njDaTuSha
Observar 4
Favorito 0
Fork 0
Código Issues 0 Pull Requests 0 Versões 1 Wiki Atividade
Ver código fonte

feat

Your Name 2 anos atrás
pai
f2a0527df8
commit
11d9c59570
3 arquivos alterados com 61 adições e 49 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 21
    0
      index.html
  2. 7
    3
      src/components/DownArrow.vue
  3. 33
    46
      src/pages/pg1/video.vue

+ 21
- 0
index.html Ver arquivo 

@@ -25,10 +25,31 @@
25 25 
     <script>
26 26 
       const vConsole = new VConsole();
27 27 
     </script> -->
28 
+    <style>
29 
+      #vid-cover {
30 
+        position: relative;
31 
+        z-index: 20000;
32 
+      }
33 
+
34 
+      #vid-cover .goback {
35 
+        position: fixed;
36 
+        right: 10px;
37 
+        top: 10px;
38 
+        width: 50px;
39 
+        height: 50px;
40 
+
41 
+        transform: rotate(90deg);
42 
+      }
43 
+    </style>
28 44 
   </head>
29 45 
   <body>
30 46 
     <img src="/share.jpg" style="display: none;" />
31 47 
     <div id="app"></div>
32 48 
     <script type="module" src="/src/main.js"></script>
33 49 
   </body>
50 
+  <script>
51 
+    var el = document.createElement('div');
52 
+    el.id = 'vid-cover'
53 
+    document.documentElement.appendChild(el);
54 
+  </script>
34 55 
 </html>

+ 7
- 3
src/components/DownArrow.vue Ver arquivo 

@@ -17,13 +17,17 @@
17 17 
   }
18 18
19 19 
   @keyframes mv-down {
20 
-    from {
20 
+    0% {
21 21 
       transform: translateY(0);
22 22 
       opacity: 1;
23 23 
     }
24 24
25 
-    to {
26 
-      transform: translateY(2vh);
25 
+    60% {
26 
+      opacity: 1;
27 
+    }
28 
+
29 
+    100% {
30 
+      transform: translateY(4vh);
27 31 
       opacity: 0;
28 32 
     }
29 33 
   }

+ 33
- 46
src/pages/pg1/video.vue Ver arquivo 

@@ -1,17 +1,24 @@
1 1 
 <template>
2 
-  <div class="page pg-bg video-pg">
3 
-    <GoBack class="goback abs" @click.stop="router.go(-1)" />
4 
-    <div class="content">
5 
-      <video
6 
-        webkit-playsinline
7 
-        playsinline
8 
-        preload="auto"
9 
-        autoplay="autoplay"
10 
-        controls="controls"
11 
-        ref="mediaRef"
12 
-        src="/video/9年活动.mp4"
13 
-      ></video>
14 
-    </div>
2 
+  <div class="page pg-bg video-pg" @click="onPageClick">
3 
+    <Teleport to="#vid-cover">
4 
+      <div class="goback" @click="router.go(-1)">
5 
+        <GoBack />
6 
+      </div>
7 
+    </Teleport>
8 
+    <video
9 
+      webkit-playsinline
10 
+      playsinline
11 
+      preload="auto"
12 
+      autoplay="autoplay"
13 
+      controls="controls"
14 
+      x5-video-player-type="h5"
15 
+      x5-video-orientation="landscape"
16 
+      x5-video-player-fullscreen="false"
17 
+      poster="/images/pg1/videocover.png"
18 
+      ref="mediaRef"
19 
+      src="/video/9年活动.mp4"
20 
+      @click="onVidClick"
21 
+    ></video>
15 22 
   </div>
16 23 
 </template>
17 24 
 
@@ -25,7 +32,6 @@ const { pause } = useModel('audio');
25 32
26 33 
 const router = useRouter();
27 34 
 const mediaRef = ref();
28 
-const show = ref(false);
29 35 
 const controls = ref();
30 36
31 37 
 onMounted(() => {
 
@@ -74,46 +80,27 @@ onMounted(() => {
74 80 
 .video-pg {
75 81 
   position: relative;
76 82 
   background-color: #000;
83 
+  overflow: hidden;
84 
+  width: 100vh;
85 
+  height: 100vw;
77 86 
   display: flex;
78 87 
   align-items: center;
88 
+  justify-content: center;
89 
+
90 
+  transform-origin: center left;
91 
+  transform: rotate(90deg) translate3d(-50vw, -50vw, 0);
79 92
80 93 
   .goback {
81 
-    z-index: 100;
94 
+    position: fixed;
95 
+    z-index: 20001;
82 96 
     left: 10px;
83 97 
     top: 10px;
84 98 
   }
85 
-  .content {
86 
-    position: relative;
87 
-    box-sizing: border-box;
88 
-    padding-bottom: 100px;
89 
-
90 
-    video {
91 
-      // width: 100%;
92 
-      width: 100vw;
93 
-      z-index: 1;
94 
-    }
95 
-    .play-action {
96 
-      position: absolute;
97 
-      z-index: 2;
98 
-      bottom: -80px;
99 
-      width: 100%;
100 
-      height: 80px;
101 
-      display: flex;
102 
-      align-items: center;
103 
-      justify-content: center;
104 99
105 
-      img {
106 
-        width: 100px;
107 
-        width: 30vw;
108 
-        height: 10vw;
109 
-      }
110 
-      img:first-child {
111 
-        margin-right: 20px;
112 
-      }
113 
-      img:last-child {
114 
-        margin-left: 20px;
115 
-      }
116 
-    }
100 
+  video {
101 
+    flex: none;
102 
+    width: 90%;
103 
+    z-index: 90%;
117 104 
   }
118 105 
 }
119 106 
 </style>