The HTML5 History API


 

 
The HTML5 History API is a new JavaScript feature to change the URL.  This makes it easier for people to share or bookmark where they are in a web app.  This is especially useful for Popcorn videos where you want to share where you are in the timeline.
 
Whenever the player at http://mapmeld.appspot.com/followfrost/view?id=932001 pauses, I change the URL at the top to add &t= and then the current time in seconds.  This is how it works:
 
myPopcorn.listen("pause"function({
    window.history.pushState({
          statemyPopcorn.currentTime()
      },
      "",
      "view?id=932001&t=" myPopcorn.currentTime()
    );
});
 
No you aren't actually moving the web browser to a new page, but giving them a new link. Unfortunately it only works in some web browsers ( check here ).  Let's change the pause-listener to make sure it doesn't cause errors. We'll only run the history function if it exists.
 
myPopcorn.listen("pause"function({
    if (window.history{
        if (window.history.pushState{
            window.history.pushState({
                statemyPopcorn.currentTime()
              },
              '',
              "view?id=932001&t=" myPopcorn.currentTime()
            );
        }
    }
});
 
Now that we've added &t= to the URL, let's add a method to read it when the app starts.
 
Make sure you've added our URL-reading function somewhere:
 
function readURL(nm){nm=nm.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var rxS="[\\?&]"+nm+"=([^&#]*)";var rx=new RegExp(rxS);var rs=rx.exec(window.location.href);if(!rs){returnnull;}else{return rs[1];}}
 
Then add this so it runs when your page loads, after creating myPopcorn:
 
if (readURL("t"!= ""{
    myPopcorn.currentTime(readURL("t"));
}

Task Discussion