Anime of hands typing on a keyboard

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.

  1. Pause the video at the timestamp you want
  2. Open the DevTools > Console
  3. 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!