视频播放

边
1 parent 1d7251f4
Showing 2 changed files with 36 additions and 13 deletions Show diff stats
src/views/Yanxue/achievementsOne.vue
src/views/Yanxue/pageDetails.vue
@@ -124,6 +124,7 @@ export default {
         .greyFont {
           color: #999;
           font-size: 24px;
+          
         }
       }
     }
@@ -167,12 +168,13 @@ export default {
           .greyTime {
             color: #999;
             font-size: 24px;
-            margin: 0 20px;
+            margin: 0 ;
           }
           .greyFont {
             color: #999;
             font-size: 24px;
+            margin-left: 20px;
           }
         }
       }
@@ -21,7 +21,7 @@
         <!--视频-->
         <div v-if="v.type == 2" class="typeTwo">
           <div class="videoTwo" v-for="(x, y) in v.videoList" :key="y">
-            <video controls >
+            <video controls :poster='imgUrl' preload="none">
               <source :src="x" type="video/mp4" />
             </video>
           </div>
@@ -39,7 +39,7 @@
 import { ImagePreview } from "vant";
 export default {
   data() {
-    return { arr: 0, modelList: [] ,background: ''};
+    return { arr: 0, modelList: [], background: "", imgUrl: "" };
   },
   methods: {
     //获取数据
@@ -50,13 +50,15 @@ export default {
         })
         .then((res) => {
           if (res.data.success) {
+            this.imgUrl = res.data.data.imgUrl;
             if (!res.data.data.background) {
               this.background = res.data.data.imgUrl;
-            }else {
+            } else {
               this.background = res.data.data.background;
             }
             let arr = JSON.parse(res.data.data.modelList);
             this.modelList = arr;
+            // this.showFrame();
           } else {
             this.$message.warning(res.data.message);
           }
@@ -78,13 +80,32 @@ export default {
           id: this.$route.query.dataId,
         })
         .then((res) => {
-          if(res.data.success) {
-            console.log('阅读量成功')
-          }else {
-            console.log('阅读量失败')
+          if (res.data.success) {
+            console.log("阅读量成功");
+          } else {
+            console.log("阅读量失败");
           }
-        })
-    }
+        });
+    },
+    //视频
+    showFrame() {
+      const video = document.createElement("video");
+      console.log("sfsddf");
+      video.addEventListener("loadeddata", function (e) {
+        canvas.width = this.videoWidth;
+        canvas.height = this.videoHeight;
+        width = this.videoWidth;
+        height = this.videoHeight;
+        ctx.drawImage(this, 0, 0, width, height);
+        var src = canvas.toDataURL("image/jpeg");
+        console.log("sfsf");
+        img.src = src;
+
+        // var currentTime = this.currentTime
+        // duration = this.duration
+        // var fps = duration / 30
+      });
+    },
   },
   mounted() {
     this.getTable();
@@ -137,7 +158,7 @@ export default {
         background-size: 100% 100%;
         text-align: center;
         margin-bottom: 5vw;
-        color:#fff
+        color: #fff;
       }
       .typeOne {
@@ -158,8 +179,8 @@ export default {
         margin: 5vw;
         .videoTwo {
-          width: 70vw;
-          height: 45vw;
+          width: 80vw;
+          height: 50vw;
           margin-bottom: 5vw;
           video {