HTML5 video player: dynamically loading videos

Question

So, using a HTML 5 compliant video player, (like Video JS) how would one go about loading a video dynamically, without having to reload the entire page? Imagine, a list of links (something like a playlist), and each link points to a video. When clicking the link, I want to load the selected video into player.

Currently, I'm using an Iframe that holds the video player, so basically a I pass a variable on to the Iframe, and reload it. I don't think this is ideal, for a few reasons; it doesn't allow the video to go full screen, the Back button moves the Iframe back not just the main page, plus, it's an Iframe. I'd rather avoid this.

Ideas? Thanks!

Answer 1

Came up with a simple solution. Here's the script; throw this in the head:

function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}

And then the HREF will call the function:

<a href="#" onClick="javascript:vidSwap('myMovie.m4v'); return false;">Link</a>