vue项目中利用后端接口返回的视频地点获取第一帧作为数据封面展示 ...

1：利用转成base64进行获取封面

1. //封装函数
2. getVideoBase64(url) {
3.             return new Promise(function (resolve, reject) {
4.                 let dataURL = "";
5.                 let video = document.createElement("video");
6.                 video.setAttribute("crossOrigin", "anonymous"); //处理跨域
7.                 video.setAttribute("src", url);
8.                 video.setAttribute("width", 400);
9.                 video.setAttribute("height", 240);
10.                 video.setAttribute("preload", "auto");
11.                 video.setAttribute('crossOrigin', 'anonymous');
12.                 video.addEventListener("loadeddata", function () {
13.                     let canvas = document.createElement("canvas"),
14.                         width = video.width, //canvas的尺寸和图片一样
15.                         height = video.height;
16.                     canvas.width = width;
17.                     canvas.height = height;
18.                     canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
19.                     dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
20.                     resolve(dataURL);
21.                 });
22.             })
23.         },
28. //使用该函数
29.        if (res.data.data.clipList) {  //数据
30.           setTimeout(() => {
31.             //item.videoUrl  视频地址    item.coverUrl  图片地址
32.             res.data.data.clipList.forEach((item, index) => {
33.               this.getVideoBase64(item.videoUrl).then((data) => {
34.                 item.coverUrl = data
35.               });
36.             });
37.           }, 1000);
38.         }

复制代码

2：利用canvas来获取视频第一帧作为封面

1.     //转换第一帧
2.     cutPicture(item) {
3.       let video = document.createElement("video");
4.       video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'
5.       video.preload = 'metadata'
6.       video.currentTime = 1   //截取的视频第一秒作为图片
7.       video.src = item.videoUrl
8.       video.setAttribute('crossOrigin', 'anonymous');
9.       video.width = 113
10.       video.height = 75
11.       document.body.appendChild(video)
12.       video.onloadeddata = function () {
13.         let canvas = document.createElement('canvas')
14.         canvas.width = 113
15.         canvas.height = 75
16.         canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
17.         var oGrayImg = canvas.toDataURL('image/jpeg');
18.         item.videoUrl = oGrayImg
19.         this.remove()
20.       }
21.       return item
22.     },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。