Skip to content
August 8, 2012 / Danii Oliver

HTML 5 Video Custom Random Playlist (Final Build) HTML5 Cross Browser Compatible

This is the near complete script for my custom random playlist. I could not take the easy road out of using a plugin like videoJs as it served up on .MP4 videos when the video.load(); was called. That was great for Flash and IE support when playing one video but this is a forward focused script that has no support for none modern browsers.

This method has the benefit of not being bogged down by the extra load of an eternal library plugin.

I will be working in a none modern browser patch.

//OLDCODING FOR NONE VIDEO.JS INTERGRATION LISTENING FOR ENDED
 //VIDEO.JS LISTENS FOR PAUSE
function nextVideo(){
 //alert('Ended');
 var playList = sessionList.join(',');
 var x=document.getElementById("demo");
 var video = document.getElementsByTagName('video');
 var videoOne = document.getElementById('video1');
 var sources = videoOne.getElementsByTagName('source');
 var webm = document.getElementById('webm');
 var mp4 = document.getElementById('mp4');
 var ogv = document.getElementById('ogv');
 //videoOne.setAttribute("src", path + sessionList[0]+ ".mp4");
 webm.setAttribute("src",path + sessionList[0]+ ".webm");
 mp4.setAttribute("src", path + sessionList[0]+ ".mp4");
 ogv.setAttribute("src", path + sessionList[0]+ ".ogv");
 if (sessionList.length !== 0) {
//to change the videoPoster (image) to preview the next video
//use in cases where the video may take long to load or by your preference. 
//I am leaving out in favor of a single transition image.
 videoOne.setAttribute("poster", path + sessionList[0]+ ".jpg");
 
 videoOne.load();
 videoOne.play();
 }
 else if(sessionList.length === 0){
 //videoOne.setAttribute("src", path + intro + ".mp4");
 webm.setAttribute("src", path + intro+ ".webm");
 mp4.setAttribute("src", path +intro+ ".mp4");
 ogv.setAttribute("src", path + intro+ ".ogv");
 videoOne.load();
 //videoOne.play(); //WITH CURRENT CODE AND THIS UNCOMMENTED THE LIST REPOPULATES and doesnt play
 //the videos just keep going.
 //DON'T PLAY JUST REPOPULATE LIST INCASE VIEWER WANTS TO PLAY ALL AGAIN.
 videoOne.setAttribute("poster", "media/END.jpg");
 for (i=0; i<videoArray.length; i++){
 sessionList.push(videoArray[i]);
 }
 sessionList.push(outro);
 if(videoOne.paused){
 videoOne.load();
 //x.innerHTML = "Refreshed Playlist: <br/>" + sessionList.length + webm.src;
 videoOne.pause();
 }
 }
 else if(webm.src == outro) {
 alert('Ended');
 }
 sessionList.shift();
 x.innerHTML= "<br/>Current Playlist: <br/>" + playList + "<br/>Currently Playing <br/>" + webm.src;
 return sessionList;
 }
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: