CODEWITHSUNDEEP
javascripthtml
steve smith
steve smith

Reputation: 33

How do I make a random video play on pageload?

I'm trying to make a random video player in html/js. It is supposed to play a different video on pageload and as soon as one video is over, it should play another one.

HTML

<video width="320" height="240" autoplay>
    <source src="abcdefg.com/example1.mp4" type="video/mp4">
    <source src="abcdefg.com/example2.mp4" type="video/mp4">
</video>

JS

<script>

var videos = [
    [{type:'mp4', 'src':'abcdefg.com/example1.mp4'}],
    [{type:'mp4', 'src':'abcdefg.com/example2.mp4'}],  
];


$(function() {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
});

</script>

However, my current code plays the same video every page reload and as soon as it's over, nothing happens.

How do I need to optimize my code so it automatically plays a different video on every pageload + when the previous video is over?

Upvotes: 3

Views: 1554

Answers (1)

Shubham Dixit
Shubham Dixit

Reputation: 1

Try this,I have added an event listener to video end property and called the newvideo() function ,so that every time the video finishes a new random video is loaded from array.I could'nt find more video urls ,you can test and let me know if it works for you.

$(document).ready(function(){

var videos = [
    [{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
    [{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
    [{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}]
];

// selecting random item from array,you can make your own
var randomitem = videos[Math.floor(Math.random()*videos.length)];

// This function adds a new video source (dynamic) in the video html tag

function videoadd(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;
   element.appendChild(source);
}
// this function fires the video for particular video tag

function newvideo(src)
{
var vid = document.getElementById("myVideo");
videoadd(vid,src ,'video/ogg');
vid.autoplay = true;
vid.load();
//vid.play();
}
// function call
newvideo(randomitem[0].src)

// Added an event listener so that everytime the video finishes ,a new video is loaded from array
document.getElementById('myVideo').addEventListener('ended',handler,false);

function handler(e)
{
newvideo(randomitem[0].src)

}
  

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video width="320" height="240" autoplay id="myVideo">
  
</video>

Upvotes: 1

Related Questions