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); //绘制canvas
dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
resolve(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.videoUrl
video.setAttribute('crossOrigin', 'anonymous');
video.width = 113
video.height = 75
document.body.appendChild(video)
video.onloadeddata = function () {
let canvas = document.createElement('canvas')
canvas.width = 113
canvas.height = 75
canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
var oGrayImg = canvas.toDataURL('image/jpeg');
item.videoUrl = oGrayImg
this.remove()
}
return item
},
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]