How can Hulu.com keep track of your position in a tv show?

Question

I'm watching a tv show on Hulu.com (which is btw, the absolute best streaming-video site around) and whether I close my browser, disconnect from the internet, and even if I restart my computer in the middle of watching a show, the next time I go to their site, I can resume the tv from exactly the time where I left off in the show.

My question is from a detailed web programming perspective, how can they achieve this? I assume it's not using sessions because I don't think that would work if I restarted my computer. If it's using cookies, then how can they constantly update the cookie with your location in a show?

In order to receive the attached bounty, please include code examples in preferably Java/JSP (PHP is ok too) of how to create the cookie and a snippet of server-side code that would allow for the updated viewer's position.

thanks!

Answer 1

They can write a cookie with some record id, then store where you were when your session went away on the server. They can know where you are by having the client send back an ack every so often that says, "yes, I've played unto time T."

Then when you come back they use the record id in the cookie to lookup in their database where you were. Doesn't matter how you disconnect, they still know the connection went away.

Answer 2

I'm just guessing, but they probably store the position on the server end. When you go to resume watching something, it sends the last recorded position as a resume-from timestamp?

The page you're on probably occasionally sends status packets back to the server, telling it your current timestamp. When the connection is severed, the last recorded value is used.

Answer 3

One simple way is that the player can update your cookie(s) via JavaScript, and that JavaScript function can be called every n seconds by the Flash player:

<script type="text/javascript">
    function UpdateViewData(videoId, time)
    {
        //for a video with id 12345, sets a cookie called:
        //hulu12345 with a value of the position
        var cookieData = 'hulu' + videoId + '=' + time + '; expires=' + getDate() + ';path=/';
        document.cookie = cookieData;
    }
</script>

In the Flash player, ActionScript can invoke the JavaScript frequently to get a fairly accurate update of where the player was the last time the cookie was set. Each time it's called, it overwrites the cookie with updated data:

import flash.external.ExternalInterface;

//in flash video player code,
//have variables for video ID and current player position
//every 5 seconds, call:
ExternalInterface.call("UpdateViewData", videoId, currentPlayerPosition);

//this will invoke a JS function on the host page named "UpdateViewData"
//and pass in the provided arguments

When you revisit the page, the first thing the server does is check to see if you have a cookie called "hulu{ID of video}" and if so, the value of that cookie is the position set last time you were viewing it.

Again (as stated in the beginning) this is a very simple way to accomplish what you're asking. I find the best way to learn is to go with a simple implementation and then add complexity once the simpler case is well-understood. Hulu likely makes periodic updates behind the scenes using AJAX. (In fact, if you watch the net traffic while watching a video using something like Firebug, you'll see occasional calls to http://t2.hulu.com/v3/playback/position?...).

Answer 4

Flash has it's own cookie-like mechanism: Local Shared Object.

There are some code examples here. I imagine Hulu just creates an LSO and periodically updates it with the position in the movie. When the movie is next loaded, it can get the LSO and restore the position. Alternatively, they could store a unique ID and save the positions server-side.