首页 > 建站教程 > JS、jQ、TS >  js获取video名称、时长、缩略图、宽高等正文

js获取video名称、时长、缩略图、宽高等

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
        })
      }
    };
  })
},