Recently, I’ve been doing some work with Mozilla around their Web Made Movies project. They’ve been experimenting with the integration of video and the Web enabled by the multimedia features available in modern browser and building tools like Popcorn.js. As we’re starting to take some of those projects out of the lab and into the real world, it’s been interesting to see how those tools hold up and what features are inspired by these situations.
With just a few hours advance notice, the Popcornjs crew put together a video/data mash-up of President Obama’s State of the Union speech for PBS, in which text analysis is displayed in time with the video. Among such a long video, with so much data, WMM leader Brett Gaylor asked if I could build in a feature making it easy to Twitter a short URL right to a point in the middle of the video. Sure I could. Unfortunately, an external service we were using to access the Twitter API broke down, so we couldn’t get the feature working in time to go live. I’ve worked around it, and here it is now.
The process is pretty simple. (I decided to use jQuery, since it was already loaded up for Popcorn.js, but it’s not necessary.) The three main steps are:
Check the URL for a time code and advance the video to the appropriate starting point.
Update the time code on the button.
Set up a “click” handler on the button to generate the link and open a Twitter window.
Here is the code to get the video started at the right place:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
The information we need here is how far into the video we want to stop. To keep it simple, we’re just looking for a floating point number to represent seconds. Since all this processing is happening in the browser and I don’t have access to the server anyway, we put the number in the “hash”, which is the part after the # symbol.
After checking to make sure we have a positive number, we test if the video is loaded, since we don’t always know the order in which our media and scripts will be loaded. If the video is already loaded, start up the video right away. Otherwise, bind our function to the “loadedmetadata” event so the browser will get back to us when it’s ready to start the video. By using an event handler, we don’t have to set a timeout to keep checking every few milliseconds. (Though I’ve been told “loadmetadata” can be slow to fire, so some people use a timeout, even though it’s ugly.) Once the metadata has loaded, we can find out how long the video is to make sure we’re not fast-forwarding past the end, and then it’s simple to set the time and start playing.
Next, update the time code on our button. (It’s not actually a button, just a div, but it works anyway.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
One problem with this code is that the button changes width as the time changes. Ideally, you’d probably check the duration of the video once at the beginning to determine whether you’re ever going to need the hours, and pick a fixed-width font.
Finally, set up the “click” event to create the link and pass it to Twitter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
The most important point here is creating the URL to pass along to Twitter (“base + ‘#’ + time”). One thing we need to be very careful about is that most Twitter clients parse everything after “#” as a hashtag, separate from the URL. The solution is to use a [URL shortener, which is handy for hiding the “#” symbol as well as saving us characters out of the allowed 140. Originally, I used the is.gd API for this (we need a different short URL for every timecode someone uses). This worked well enough, but it required an extra call out to the network, which made things crawl on a slow connection.
Fortunately, Twitter provides a nice, clean sharing tool that will create a short URL for us. (This page explains how to use it.) We just have to make sure to wrap our target URL in encodeURIComponent so the “#” gets escaped, otherwise everything after it won’t make it to the server. Normally, I hate using pop-up windows, but Twitter was pulling some kind of referrer-checking shenanigans, giving me a “Forbidden” server error when I tried to load this page inside an
That’s everything. Hopefully, the next time PBS and Mozilla do another one of these, they’ll integrate this feature. Please comment below if you decide to use it or if you want to suggest any improvements.