js获取video名称、时长、缩略图、宽高等,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下:
// 调用 asyncImgChecked(file).then(res=>{ console.log(res) }) // 获取视频标题+时长+缩略图+宽高 asyncImgChecked(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.readAsDataURL(file.raw); // 必须用file.raw reader.onload = ()=> { // 让页面中的img标签的src指向读取的路径 let video = document.createElement('video'); video.src = reader.result; video.currentTime = 3; //截取缩略图时的视频时长,一定要设置,不然大概率白屏 video.oncanplay = ()=>{ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.setAttribute("width",100); canvas.setAttribute("height",100); video.setAttribute('width', 100); video.setAttribute('height', 100); ctx.drawImage(video, 0, 0, video.width, video.height); const imgSrc = canvas.toDataURL('image/png'); resolve({ duration:parseInt(video.duration % 60),//得到整数的视频时长 imgSrc,//base64的缩略图图片路径 width:video.videoWidth, height:video.videoHeight, videoName:file.name }) } }; }) },