[html] H5播放的video视频，如何实现对视频截图？

    <video controls src="./assets/demo.mp4" width="400" height="300" id="video">
      Sorry, your browser doesn't support embedded videos.
    </video>
    <button onclick="screenShot()">Screenshot</button>
    <script>
      function screenShot() {
        const video = document.getElementById('video');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0);

        // download picture
        const a = document.createElement('a');
        a.href = canvas.toDataURL('image/png');
        a.download = `${Date.now()}`;
        a.click();
      }
    </script>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题