HTML5 Video Streaming with Blob Urls
I have written a few demos on using the HTML5 video tag, showing how you can make screenshots from movies or create animated GIFs, but last night I noticed some major issues with loading a large local video file. It basically crashed my Chrome tab and after looking at my code again, this makes sense. When the user dropped or selected a local video file, I read that entire file using the FileReader API and then created a Blob URL out of it so that it can be used in the HTML5 video tag. But, reading the entire file is not necessary as both the video and audio tag support a file stream.
It turns out that I can skip FileReader completely and create a blob Url out of the user provided video instantly. This url is then assigned to the video tag and it starts playing the video right away. As the browser loads more of the video data, this gets passed into the video tag. Thus, you can now load and play really large local video files in your browser without crashing. I have update my “animated GIF maker” script to only use a Blob and I was able to make a GIF out of a really large video.
In terms of my “screenshots from video” script, I decided to rewrite that from scratch as I wanted to improve the error handling and make some other enhancements. I think the code is written much better now and you check it out over here. It’s pretty exciting to see HTML5 bring all these features to the client side.
