js获取视频第一帧

356 阅读1分钟

1.标签部分

```<input type=file onchange='videoChange(this)' accept='video/mp4'>
    <video id=''video'></video>
```

2.js部分

```function videoChange(e){
        let file= e.file[0]
        let url=URl.createObjectURL(blob)
        let videoDom=document.getElementById('video')
        videoDom.src=url
        videoDom.addEventListener('canplay',function(){
            let canvas=document.createElement('canvas')
            canvas.width=videoDom.videoWidth
            canvas.height=videoDom.videoHeight
            setTimeout(()=>{
                    canvas.getContext('2d').drawImage(videoDom,0,0, canvas.width, canvas.height)
                    let firstFrameBase64=canvas.toDataURL('image/png')
                  console.log(firstFrameBase64)  
            },500)
        })
}
```