根据video生成封面图,vedio要的url要允许跨域,可以设置nginx代理服务器来做
let video = document.createElement('video');
/**
* 创建视频
*/
export const createVideo = (src) => {
video.setAttribute('height', '110');
video.setAttribute('width', '110');
video.setAttribute('preload', 'auto');
video.setAttribute('src', src);
video.setAttribute('x-webkit-airplay', "allow");
video.setAttribute('autoplay', 'true');
video.setAttribute('crossOrigin', 'anonymous');
return video;
}
/**
* 获取视频封面图
*/
export const captureImage = (videoEle) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const canvas = document.createElement('canvas')
let imgWidth = videoEle.videoWidth;
let imgHeight = videoEle.videoHeight;
videoEle.addEventListener('timeupdate', () => {
canvas.getContext('2d').drawImage(videoEle, 0, 0, imgWidth, imgHeight);
const dataUrl = canvas.toDataURL('image/png');
videoEle.pause()
resolve(dataUrl);
}, false)
}, 1000)
})
}
export const getImageByVideo = (url) => {
return captureImage(createVideo(url))
}