update

src/mixins/global.js

@@ -81,48 +81,35 @@ Vue.mixin({
             })
         },
         getVideoBase64(url,width=400,height=240) {
+            // url="http://localhost:8080/f5f7c8e13cd6f11ef8eed12ea93a642c.MP4"
             return new Promise(function (resolve, reject) {
-                // let dataURL = '';
-                // let video = document.createElement("video");
-                // video.setAttribute('crossOrigin', 'anonymous');//处理跨域
-                // video.setAttribute('src', url);
-                // video.setAttribute('width', width);
-                // video.setAttribute('height', height);
-                // video.addEventListener('loadeddata', function () {
-                //     let canvas = document.createElement("canvas"),
-                //         width = video.width, //canvas的尺寸和图片一样
-                //         height = video.height;
-                //     canvas.width = width;
-                //     canvas.height = height;
-                //     canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
-                //     dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
-                //     resolve(dataURL);
-                // });
                 let dataURL=""
                 // 在缓存中创建video标签
                 var video = document.createElement("video")
-                video.setAttribute('crossOrigin', 'anonymous');//处理跨域
+                // video.setAttribute('crossOrigin', 'anonymous');//处理跨域
+                // video.setAttribute('useCORS', true);//处理跨域
                 video.setAttribute('src', url);
                   // 再添加一个静音的属性，否则自动播放会有声音
-                  video.setAttribute('muted', 'muted')
+                //   video.setAttribute('muted', 'muted')
                 // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才        
-                video.setAttribute('autoplay', 'autoplay')
-              
+                // video.setAttribute('autoplay', 'autoplay')
                 video.setAttribute('width', width);
                 video.setAttribute('height', height);
-               
-                // video注册canplay自动播放事件
-                video.addEventListener('canplay', function() {
+                video.setAttribute('controls','controls')
+                // document.body.appendChild(video)
+                // // video注册canplay自动播放事件
+                video.addEventListener('loadeddata', function() {
                     let canvas = document.createElement("canvas"),
                         width = video.width, //canvas的尺寸和图片一样
                         height = video.height;
                     canvas.width = width;
                     canvas.height = height;
                     canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
-                    console.log(canvas)
                     dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
-                    // video.remove()
-                    resolve(dataURL);   
+                    video.remove()
+                    canvas.remove()
+                    console.log(dataURL)
+                    resolve(dataURL); 
                 });
             })
         }

src/views/blind-box/blind-img-swiper.vue

@@ -59,7 +59,7 @@ export default {
 
   .video-play-icon {
     position: absolute;
-    top: 50%;
+    top: calc(~"50% - 38px");
     left: 50%;
     transform: translate(-50%, -50%);
   }