6
How to capture single frame from an HTML video
source link: https://daverupert.com/2022/11/html5-video-capture-frame-still/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to capture single frame from an HTML video
November 29, 2022
You ever want to grab a still frame from a video you’re watching online? Here’s a trick I use from time to time to get video stills from HTML <video> and avoid all the fussy hover-activated UI bits.
- Pause the video at the timestamp you want
- Open the DevTools > Console
- Target the right context and paste this in the console…
const v = document.querySelector('video')
let c = document.createElement('canvas')
c.height = v.videoHeight || parseInt(v.style.height)
c.width = v.videoWidth || parseInt(v.style.width)
const ctx = c.getContext('2d')
ctx.drawImage(v, 0, 0)
const wnd = window.open('')
wnd.document.write(`<img src="${c.toDataURL()}"/>`)
This will open a new page with an image captured from the current timestamp. Then you can right-click > save as… or drag it to your desktop, whatever you want to do. Enjoy!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK