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({
state: myPopcorn.currentTime()
},
window.history.pushState({
state: myPopcorn.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({
state: myPopcorn.currentTime()
},
'',
"view?id=932001&t=" + myPopcorn.currentTime()
);
}
}
});
if (window.history) {
if (window.history.pushState) {
window.history.pushState({
state: myPopcorn.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(1 * readURL("t"));
}
myPopcorn.currentTime(1 * readURL("t"));
}