Question

I’m trying to make a playlist using HTML5 video feature in the modern browsers.

The only way I found so far is to remove video tag then append it again with a different source like below..

$("second video link").click (function(){
   $("#video wrapper").remove();
   $("#video wrapper").append(" new video tags ");
});

I think there must be a better way…

Answer 1

the answer depends on what approach you like and what browsers you want to serve videos to. IE9 fails on the video.src() function if you supplied multiple sources via the source sub-elements. If you require only a single browser to work, check caniuse.com for webm and mp4 to see which browser supports which codec. In case you find out you need multiple codecs as your audience uses both mp4- and webm-only browsers you will have to do a check with .canPlayType() before using the .src() function and to eliminate sources that would fail (though this check is not bullet proof either). Android 2.2 (or was it 2.1, please correct me) does not know the funciotn at all. Some Mac OSX browsers have similar problems afaik.

bottom line: you should use a combo of canPlayType() to filter wrong sources, then use an array or any other sortable list to grab the next video source and set it once the “ended” event was fired by the video element using the src() function. I also like to set the type attribute of the video element when changing the source to circumvent quirks of some browsers.

possible types are: video/mp4 for mp4 and m4v files; video/webm for webm files; video/ogg for ogv files; either provide the type via some kind of server-side scripting or check for the file extension in JS and then do a switch() {…} or if else()…

You can get the extension easily via

var sourceExt = (sourceString.split(".")).pop(); 

where sourceString is a variable containing the url of your source

furthermore you should check browser specs to comply with their requirements for videos. iOS for instance requires mp4s to be encoded with baseline profile