页面修改

src/components/CommodityMan/materialMan.vue

@@ -117,8 +117,10 @@
                       :content="item.Name" placement="top-start">
                       <div @click="PageSelect(item,index)" :class="item.Selected ? 'selected' :''"
                         class="el-tooltip item material-item ">
+
                         <img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'"
                           class="material-img" style="width: 140px; height: 140px;">
+
                         <div class="material-video-info"><i class="el-icon-video-play"></i>
                           <span>{{Time(item.VideoTime)}}</span></div>
                         <div flex="dir:left" style="margin-top: 5px;">
@@ -178,6 +180,10 @@
         <el-button size="small" type="primary" @click="pagesubmitForm('addpageMsg')">确 定</el-button>
       </span>
     </el-dialog>
+    <video width="320" height="240" controls id="upvideo" style="display:none">
+    </video>
+    <img :src="testImg" style="width:120px;height:60px;border:1px solid red;" />
+    <canvas id='mycanvas'  ></canvas>
   </div>
 </template>
 <script>
@@ -243,7 +249,7 @@
         checkList: [],
         checkAllList: [],
         checkAll: false,
-
+        testImg: ""
       }
     },
     created() {
@@ -251,9 +257,33 @@
       this.GetPageList();
     },
     mounted() {
-
+      this.findvideocover("http://192.168.2.214:8130/Upload/Video/20200901114120428.mp4")
     },
     methods: {
+      //获取视频封面
+      findvideocover(videoUrl) {
+       let _this = this;
+      this.$nextTick(() => {
+        let video = document.getElementById("upvideo");
+        let source = document.createElement("source");
+  
+        source.src = videoUrl;
+        source.type = "video/mp4";
+        video.appendChild(source);
+        video.addEventListener("loadeddata", function() {
+          var canvas = document.createElement("canvas");
+          canvas.width = "320";
+          canvas.height = "320";
+          canvas
+            .getContext("2d")
+            .drawImage(video, 0, 0, canvas.width, canvas.width);
+            console.log("video",video);
+          var img = document.createElement("img");
+          let imgsrc = canvas.toDataURL("image/png");
+          _this.testImg=imgsrc
+        });
+      });
+      },
       Time(value) {
         var theTime = parseInt(value); // 秒
         var middle = 0; // 分