本文主要是介绍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},
这篇关于vue项目中利用后端接口返回的视频地址获取第一帧作为数据封面展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
