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!

Solution

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>

Comments

[Ken Ingram]

Old solution, was just what I needed. Simple. quick.