最近需要解决@liveqing插件无法播放mp4视频的问题。用canvas+时间点截图，用别人的代码改进作图方法。/***@description:视频截图*@param{String}url:视频地址*@param{Number}currentTime:视频帧数*@param{download}hasDownload:是否下载*@result:返回base64，打开下载download*/exportfunctionvideoSnapshot(url,currentTime=1,hasDownload=true){returnnewPromise((resolve,reject)=>{constcanvas=document.createElement('canvas')//创建canvas截屏constvideo=document.createElement('video')//创建视频存储截屏视频video.setAttribute('crossOrigin','anonymous')//支持跨域document.body.appendChild(video)//将视频插入页面video.style.visibility='hidden'//视频不显示video.setAttribute('src',url)//设置视频路径//监听视频播放video.onplay=function(){//暂停video.pause()//指定当前位置的视频播放时间（以秒为单位）video.currentTime=currentTime//设置宽度和要播放的视频容器的高度。如果你设置了一个项目，它会根据比例自动生成。这里，高度是固定的，宽度是自动的。video.height=video.clientHeight//设置canvas的截图大小，如果没有给出宽高值将取视频容器的宽高canvas.width=video.clientWidthcanvas.height=video.height/*在视频跳到某一帧时使用定时器缓冲视频，视频加载完成后截图。如果截图是黑屏，说明视频还没有加载。截屏开始*/setTimeout(()=>{//使用画布绘制视频图像canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height)letb64=canvas.toDataURL('image/png')if(hasDownload){letlink=document.createElement('a')link.href=b64link.setAttribute('download','videoscreenshot.png')link.style.display='none'document.body.appendChild(link)link.click()}resolve(b64)document.body.removeChild(video)},1000)}//当视频准备好时video.onloadeddata=()=>{//播放video.play()}})}
