video生成封面图
根据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)) }
学而不思则罔,思而不结则殆,结而不看,一事无成