0

I found some examples, where people used a canvas and javascript to take multiple screenshots of a running video. You can see these examples here or here.

The code sets a time interval, draws the current timeframe to a canvas and uses this to create a screenshot.

I am wondering if it would be possible to use a similar technique, to automatically create a kind of preview for chapters of the video. But this would require to grab a bunch of screenshots before the video started. I failed to implement this, so I would like to know, if it is at all possible.

I know that one could use pretaken screenshots for the chapters, but I wanted to automate this process.

Thanks in advance for your answers.

Bobipuegi
  • 521
  • 1
  • 4
  • 11

1 Answers1

0

This could be done in theory by jumping to specific times in the video (say every 10 seconds) using video.currentTime, waiting for the frame to be available (using progress events), drawing the frame to a canvas (canvas.drawImage) and storing it in some way (say an array of images having image.src = canvas.toDataURL).

However, this process will take time because at least the relevant parts of the video would need to be loaded in the browser so the frame could be grabbed. The video would not be playable during the process as it is being skipped to different frames.

This behavior is usually not acceptable, but it really depends on your specific use case.

Giladd
  • 1,351
  • 8
  • 9
  • Hint: Use two ` – Jordan Running Jan 26 '17 at 23:21
  • Other hint : if the server can handle it, you could even use more ` – Kaiido Jan 27 '17 at 05:43
  • Thank you, that where two ideas I came up with too, but had problem implementing. I didn't knew about the progress event. I will try both to see, which one runs smoothest. – Bobipuegi Jan 27 '17 at 09:10
  • I made a demo here to see if the idea could work: http://codepen.io/giladaya/pen/ygzWKN it uses `oncanplay` event (not `progress`) and it works but it's veeery sloooow – Giladd Jan 27 '17 at 09:26