获取本地视频第一帧画面

HTML

	<div>
        <input type="file" id="filepicker" accept="video/*" onchange="videoChoose(event)">
        <div>
            <p>视频预览</p>
            <video id="video" class="video" src="" controls width="320" height="180"></video>
        </div>
        <div>
            <p>第一帧封面</p>
            <img id="cover" class="cover" src="" alt="">
        </div>
	</div>

JS

let videoChoose = function(e) {
        let file = e.target.files[0]
        let video = document.querySelector('#video')
        video.src = URL.createObjectURL(file);
        video.currentTime = 1 // 第一帧
            // 监听在当前帧的数据加载
        video.addEventListener('loadeddata', () => {
            // 创建 画布
            var canvas = document.createElement('canvas')
                // 设置画布大小
            canvas.width = video.width
            canvas.height = video.height
                // 画图
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.width)
                // 获取画布的 base64 数据
            const cover = canvas.toDataURL('image/png')
                // 渲染第一帧图片
            document.querySelector('#cover').src = cover
        })
    }