I was reading an article about HTML5 video controls today and I noticed that they mention changing the video playbackrate attribute to control how fast a movie is playing. This is a great attribute but unfortunately, it is only currently supported by Chrome and Safari. But, messing around with CANVAS recently made me realize that this could easily be done with CANVAS. We are already grabbing each frame of the video so slowing down the drawing loop should give you slow motion.
Read more
Last week, I wrote about making YouTube screenshots and creating video effects with HML5 canvas, and now I want to follow up and show how you can split a video into many draggable CANVAS objects. It is a bit similar to Craftymind’s video blow out demo and Matt Greer’s Movie Puzzle but with two major differences.
First of all, I wanted to keep the code small and simple, and secondly, I am building and drawing into many CANVAS elements instead of using one CANVAS. This is mostly to support the drag and drop functionality, allowing the end user to move the video tiles around the page. Draggable functionality is simply added with the jQuery UI draggable function applied on each CANVAS element. So, how does this all work?
Read more
If you use Twitter than you might have heard about Twitter Lists, a curated group of Twitter users and their stream of tweets. It’s a pretty cool way of viewing tweets from a group of people that tweet about a particular subject. The lists can be private or public and there are many websites out there that help you dicover interesting tweets. Twitter Counter actually has a 100 most popular Twitter lists page that is ranked by followers count and refreshed daily.
One of my annoyances with viewing the stream of tweets, however, is that they are all organized by date and I would prefer to view Twitter tweets organized by user. This way I can disregard or hide tweets from a particular user that I don’t care about while not removing him or her from the list. I could even add some collapse/expand functionality and improve the user experience of that list page. I wish that Twitter had an “organize by user” view for any stream of tweets but for now I can show you how to use the twitter API and reorganize the list in a php script.
Read more
Today, I have once again been messing around with CasperJS and this time around, I wanted to play around with browser cookies. PhantomJS API Reference has a command line option –cookies-file=/path/to/cookies.txt that specifies the file name to store persistent cookies but I want to disable cookies, not store them. I also want to test and see what the cookies are on the page to verify that they have been disabled.
Read more
I have seen a lot of cool HTML5 demos lately and wanted to go over a simple example of leveraging the HTML5 Canvas tag to add filters to a video file. In other words, load a video into a video tag, draw each frame into a CANVAS element, loop through some pixel manipulation that changes each frame, and thus make video filters like shifting colors, tinting, or making the video grayscale.
If you are just starting with HTML5, the following links do a great job describing the basics of CANVAS and an overview of HTML5. You could also check out my recent demo of pulling YouTube videos into CANVAS in order to make video screenshots. This time around, I want to do something much more basic, work with a local video file, and do some simple pixel manipulation. So, how do we use the <video> and <canvas> elements together?
Read more
The other day I wanted to download all my flickr photos with a simple click instead of doing it individually. I looked around for some flickr profile downloaders but was not really impressed with the results, and in my opinion, I should just be able to do this in the browser. First of all, I should be able to just download any file by clicking on it once (instead of right clicking, choosing where to save it, etc). And secondly, if I want to download multiple files at once, I should be able to create a JavaScript function that will do this.
Unfortunately, most browsers will not let you do this on the client side. On the server side, you could specify an HTTP-Header with a mime-type but this does not work for files you don’t own. The good new is that Chrome, my favorite browser, allows client-side download forcing with the support of the HTML5 download attribute (Chrome supports it since version 14).
Read more
Have you ever wanted to easily grab an image from a youtube video and save the screenshot to your computer? After reading a blog post on drawing video frames into the canvas element I wondered if this concept could be extended for YouTube videos. If I save a YouTube video using a chrome extension and then load the video locally it works perfectly, but the whole idea is to be able to do this without downloading the video first.
So, first of all, we need to somehow load YouTube’s actual video files into the HTML5 video tag. At first, I tried using a call to YouTube’s get_video_info script (http://www.youtube.com/get_video_info?video_id=VIDEOID) via a simple php proxy and this did give me lots of different video urls based on quality and formats for a particular YouTube video. Unfortunately, this only worked when I was testing on my own machine. The video urls failed to work on my web server.
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
Have you ever wanted to save an online website locally? In most browser you can do this with a couple of clicks but what if you wanted to do this programmatically? Maybe you want to save all the resources, not just the html page, but also the external JavaScript and style sheets and control where they are saved. If we are talking PHP, I generally think of web scraping via curl but in this situation I really need more flexibility and features. I don’t want to use regex to find external resources (or add-on an extra library like PHP Simple HTML DOM Parser), make multiple curl calls in a loop, etc… So, it’s time to take a look at wget.
Read more
There are many examples online that show people how to retrieve content from Wikipedia but most of them focus on articles. What if you just wanted to grab the pictures from Wikipedia? You might want to do this because the images on Wikipedia are generally in the public domain (no copyright issues). They are also usually pretty good in terms of quality and available in many sizes. Wikipedia does have an API and it is pretty simple to create a small PHP script that will retrieve images from Wikipedia query.
If you search the API page for prop=images you will see that this returns all images contained on the given page(s). So, a query for Albert Einstein would look like this:
http://en.wikipedia.org/w/api.php?action=query&titles=Albert%20Einstein&prop=images&format=json
Read more
