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

本文主要是介绍vue项目中利用后端接口返回的视频地址获取第一帧作为数据封面展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

//封装函数 getVideoBase64(url) {return new Promise(function (resolve, reject) {let dataURL = "";let video = document.createElement("video");video.setAttribute("crossOrigin", "anonymous"); //处理跨域video.setAttribute("src", url);video.setAttribute("width", 400);video.setAttribute("height", 240);video.setAttribute("preload", "auto");video.setAttribute('crossOrigin', 'anonymous');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); //绘制canvasdataURL = canvas.toDataURL("image/jpeg"); //转换为base64resolve(dataURL);});})},//使用该函数if (res.data.data.clipList) {  //数据setTimeout(() => {//item.videoUrl  视频地址    item.coverUrl  图片地址res.data.data.clipList.forEach((item, index) => {this.getVideoBase64(item.videoUrl).then((data) => {item.coverUrl = data});});}, 1000);}

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

    //转换第一帧cutPicture(item) {let video = document.createElement("video");video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'video.preload = 'metadata'video.currentTime = 1   //截取的视频第一秒作为图片video.src = item.videoUrlvideo.setAttribute('crossOrigin', 'anonymous');video.width = 113video.height = 75document.body.appendChild(video)video.onloadeddata = function () {let canvas = document.createElement('canvas')canvas.width = 113canvas.height = 75canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)var oGrayImg = canvas.toDataURL('image/jpeg');item.videoUrl = oGrayImgthis.remove()}return item},