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.
Read more
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.
Read more
Update: As pointed out in the comments, we are only changing a user-agent string not the rendering engine. IE Conditional comments are enabled through the IE rendering engine so sending an IE user-agent will not give you a real IE screenshot. With that being said, you can use SlimmerJS to render Gecko (browser engine of Mozilla Firefox) screenshots instead of WebKit.
CasperJS is an awesome testing utility for PhantomJS, a headless WebKit browser. In other words, it is something like Selenium, a tool for you to automate a browser, but written in JavaScript instead of Java. It basically allows you to run all kinds of tests on your website and log the information or render screenshots. It comes packaged with a sample script for making a screenshot, but what if you wanted to make a couple screenshots per page based on different browsers (different user agent string).
Well, if you look at the CasperJS API you can see a userAgent example but this example does not work. It is not very obvious at first as the example seems to be working when run (you get the expected print statements in the console). However, if you include a callback on resource requested and retrieve the User-Agent string for each resource, you quickly realize that both tests have been done with the same last user agent string. Look at the output of this example code:
Read more
