[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 pictureconst a = document.createElement('a');a.href = canvas.toDataURL('image/png');a.download = `${Date.now()}`;a.click();}</script>

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] H5播放的video视频，如何实现对视频截图？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。