Skip to content
July 19, 2012 / Danii Oliver

HTML 5 Custom Random Playlist (Beta)

Below I have put together an HTML 5 Randomized playlist. This is an unrefined beta version that serves as proof of concept. I will be continuing to build it so it applies to various sites loading lists dynamically with the additional following features:

  1. mp4, webm & ogv dynamic extensions and push to src for cross browser MIME type compatibility —
  2. Dynamic poster load for each video in case video is too large for immediate playback
  3. Integration with Video.js
  4. List reload function if play is clicked after the playlist has ended for a seamless experience. —
  5. Dynamic list load from XML, MySQL & JSON
  6. A PHP version of the script
<html>
 <head>
 <title>HTML</title>
 </head>
 <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
 <!--<script src="http://www.w3.org/2010/05/video/script.js"></script>-->

 <script type="text/javascript">
 document._video = document.getElementById("video1"); var videoArray = ['VIOLADAVIS','ROONEYMARA','MIAWASIKOWSKA','JESSICACHASTAIN','GLENNCLOSE','GARYOLDMAN','ADEPEROODUYE'];
 var intro = 'INTRO.mp4,';
 var outro = 'END.mp4';
 var list = Array();
 var i,j;
 var randomIndex = Math.floor(Math.random() * videoArray.length); var randomString = videoArray[randomIndex];
 for (i=0; i<videoArray.length; i++){
 list.push(videoArray[i] + ".mp4");
 //document.write(list);
 }
 var newarr = shuffle(list);
 console.log(newarr);
 document.write(intro + newarr + outro); function shuffle(list)
 { 
 for(var j, x, i = list.length; i; j = parseInt(Math.random() * i), x = list[--i], list[i] = list[j], list[j] = x);
 return list;
 };
 var sessionList = newarr; 

 //call on video.ended
 function myFunction()
 {
 var playList = sessionList.join(',');
 var video = document.getElementsByTagName('video');
 var videoOne = document.getElementById('video1'); 
 var sources = videoOne.getElementsByTagName('source');
 var webm = document.getElementById('webm');
 webm.setAttribute("src", sessionList[0]);
 if (sessionList.length != 0) {
 videoOne.load();
 videoOne.play();
 }
 else if(sessionList.length == 0){
 webm.setAttribute("src", outro);
 videoOne.load();
 //videoOne.play();
 videoOne.setAttribute("poster", "END.jpg");
 }
 else if (webm.src == outro) {
 alert('Ended');
 };

 sessionList.shift();
 var x=document.getElementById("demo");
 x.innerHTML=playList + webm.src; return sessionList;
 }
 </script>
<body>
 <div>
 <button onClick="myFunction()">Update List</button> 
 <div id="demo"></div>
 <video id="video1" controls onended="myFunction()" poster="INTRO.jpg">
 <!-- <source id='mp4'
 src="INTRO.mp4"
 type='video/mp4'> -->
 <source id='webm'
 src="INTRO.webm"
 type='video/webm'>
 <!-- <source id='ogv'
 src="INTRO.ogv"
 type='video/ogg'> -->
 </video> <div style="text-align:center"> 
 <button onclick="playPause()">Play/Pause</button> 
 <button onclick="makeBig()">Big</button>
 <button onclick="makeSmall()">Small</button>
 <button onclick="makeNormal()">Normal</button>
 <br /> 

</div> 
</body>
</html>
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: