0603

web/src/components/longvideo/index.vue

@@ -5,12 +5,16 @@
       <video @click="autoplay" :style="{left:translate.x + 'px'}" ref="layout" autoplay loop :src="require('@/assets/video/video.mp4')"></video>
     </div>
     <div class="scorll-bar" :style="{width:barW+'px'}">
-      <span class="k" ref="scro" :style="{left: -translate.x * (((barW-100)/wLimit)) + 'px'}"></span>
+      <span @click="autoplay" class="k" ref="scro" :style="{left: -translate.x * (((barW-100)/wLimit)) + 'px'}"></span>
       <div>
         <img :src="require('@/assets/images/icon/shoushi.svg')" alt="">
         <span>可左右移动观看画面</span>
       </div>
     </div>
+
+    <div class="loading" v-if="loading">
+      <span>加载中...</span>
+    </div>
   </div>
 </template>
 
@@ -20,6 +24,7 @@ const wh = {width: window.innerWidth, height: window.innerHeight}
 export default {
   data(){
     return {
+      loading:true,
       translate: {
         x: 0
       },
@@ -122,11 +127,15 @@ export default {
     this.readyMove = this.readyMove.bind(this)
     this.$refs.layout.addEventListener('mousedown', this.readyMove)
     this.$refs.layout.addEventListener('touchstart', this.readyMove)
-    this.$refs.layout.play();
 
     this.scrollreadyMove = this.scrollreadyMove.bind(this)
     this.$refs.scro.addEventListener('mousedown', this.scrollreadyMove)
     this.$refs.scro.addEventListener('touchstart', this.scrollreadyMove)
+
+    this.autoplay()
+    this.$refs.layout.addEventListener('loadedmetadata',()=>{
+      this.loading = false
+    })
   },
   beforeDestroy () {
     this.$refs.layout.removeEventListener('mousedown', this.readyMove)
@@ -207,5 +216,24 @@ export default {
       }
     }
   }
+
+  .loading{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    background: #000;
+    >span{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%,-50%);
+      color: #fff;
+      font-size: 16px;
+      display: inline-block;
+    }
+  }
 }
 </style>

web/src/pages/Home.vue

@@ -77,10 +77,6 @@
                     <img :src="require('@/assets/images/upload_w.png')" alt="">
                 </div>
             </div>
-
-            <div @click="showLoingVideo=true">
-                展示边幅
-            </div>
         </div>
 
         <!-- 文物搜索 -->