获取视频时长和缩略图

<input type="file" class="input" ref="inputFileRef" @change="onAddFile" title=""/>

onAddFile(e) {
    const reader = new FileReader()    
    reader.onload = function (e) {
        const video = document.createElement('video')
        video.setAttribute("preload", 'auto')    // 设置为meta貌似无效    

        video.src = e.target.result
        // 获取视频时长
        // onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。       
        // 视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。
        video.onloadedmetadata = function(evt) {              
            let duration = video.duration        
        }       
         // onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发        video.onloadeddata = function(evt) {
            const canvas = document.createElement('canvas')              
            canvas.width = this.videoWidth * 0.2              
            canvas.height = this.videoHeight *0.2              
            const ctx = canvas.getContext('2d')              
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)              
            const image = new Image()
            // canvas.toDataURL('image/png')即图片的base64              
            image.src = canvas.toDataURL('image/png')
             // blob形式
             canvas.toBlob((blob) => {
                 console.log(blob)             
            }, 'image/png')
        }
    }

}

视频不大的话，加载还是很快的。不过视频越大，加载时间越久