Make Screenshots with HTML5 Video
Update:
Below I talk about how FileReader is used to read the user selected video but reading an entire video into memory is a bad idea and will not work with large videos. The updated links skip this step and construct a blob Url right away, and as a result, stream the video so that it can be used right away and you can load large files.
A while ago I have written about making screenshots with YouTube videos but today I want to approach this problem from another angle. The YouTube post mostly talked about the problems of pulling videos from YouTube and saving the video data from CANVAS to an image. Doing that purely on the client side is not easy, but today I want to leverage HTML5 Video, FileReader, Blob Urls, and CANVAS to show how to load local video files (perhaps ones you already downloaded from YouTube with various other solutions), slow down the video playback, and convert those video frames into an actual image so that you can make video screenshots with your browser.
This is actually pretty simple thanks to HTML5 FileReader. Drag and drop is handled by window ondrop event while FileReader readAsArrayBuffer method reads the dropped file. Now, the HTML5 video tag expects a url to a file so passing the actual video data to the video tag does not work. But, we can make a Blob URL with URL.createObjectURL() method and use that as our video URL. I added some validation to make sure you only drop one file at a time and that the type of file is an actual video. Here is a demo that allows you to play local videos with your browser.
Now, to make screenshots, we need add some code that will convert a given video frame into an image. This can easily be done by rendering a video frame inside a CANVAS object, retrieving the pixels, and using the canvas.toDataURL() method and base64 encoding to convert CANVAS data into an inline image. I have also added options to control the screenshot size and video playback rate which should help in capturing the video image at the right time.
Here is the Browser Video ScreenShot Maker.
