This content originally appeared on daverupert.com and was authored by daverupert.com
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!
This content originally appeared on daverupert.com and was authored by daverupert.com
daverupert.com | Sciencx (2022-11-29T15:47:00+00:00) How to capture single frame from an HTML video. Retrieved from https://www.scien.cx/2022/11/29/how-to-capture-single-frame-from-an-html-video/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.