Question

The specific video sites are just for example. But I’m curious how one can queue up another video after the first finishes, from the same site or otherwise. Essentially an ad-hoc playlist.

Given a sequence of video links, how can one string them together to make a “playlist”?

Answer 1

JavaScript is the way to go here. When one video ends, have JavaScript change the values for the new embed. Because Vimeo and YouTube both use similar embed methods (iframes), it makes life much simpler.

When one video ends (more on detecting that at the end of this post) use JavaScript to change the SRC attribute on your iframe. You can also change the width and height as needed.

Example:

<iframe id="ourVideo" width="400" height="225" src="http://player.vimeo.com/video/28023982?title=0&amp;byline=0&amp;portrait=0" frameborder="0"></iframe>

Then, in JavaScript

var newHTML = "http://www.youtube.com/embed/ZnehCBoYLbc?rel=0";
document.getElementById("ourVideo").setAttribute( "src", newHTML );

I created a new variable for the new HTML, but you can pull this from wherever you would like. Using frameworks like jQuery make life much simpler:

$("#ourVideo").attr( "src", newHTML );

If you wanted a playlist functionality, I’d recommend populating an Array in JavaScript, then iterating through that:

var playlist = [ "http://....1", "http://....2", "http://....3", "http://....4" ];

How to know when to change:

This is tricky. You can do it the lazy way, which is set a timer equal to the length of the video (not recommended, especially considering load time). The other way is to use JavaScript callbacks from the video players. This is more complicated, but much better.

More information on the callbacks here:

YouTube’s JS API Callbacks

Vimeo’s