why does this keep playing same video instead of random new video?

Question

I'm making a random order video player, adapting code from here but the same video just keeps playing, even though I can see (from text above the video) that the random ordering is working. Live version is here.

Is the problem with the appendChild meaning the new video is end of a list but the first in list keeps playing? I tried replaceChild but that didn't work.

<script type="text/javascript">
$(document).ready(function(){

    var videos = [
        [{type:'mp4', 'src':'carlos/one-carlostest.mp4'}],
        [{type:'mp4', 'src':'carlos/two-carlostest.mp4'}],
        [{type:'mp4', 'src':'carlos/three-carlostest.mp4'}],
        [{type:'mp4', 'src':'carlos/four-carlostest.mp4'}],
        [{type:'mp4', 'src':'carlos/five-carlostest.mp4'}]
    ];

    // selecting random item from array as first to be played
    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(){
        var newRandom = videos[Math.floor(Math.random()*videos.length)];
        newvideo(newRandom[0].src)
        document.getElementById("monitor").innerHTML = "randomitem is " + newRandom[0].src;
    }
})
</script>

Also, if anyone can tell me why the autoplay never works that'd be appreciated, though it's the least of my problems.

Answer 1

I have kinda found this solution for your video playing one after other. now in your JS file, now you just will need to add your video src path.

    var vidElement = document.getElementById('video');
        var vidSources = [
          "https://lutins.co.uk/carlos/one-carlostest.mp4",
          "http://www.w3schools.com/html/movie.mp4"
          ];
        var activeVideo = Math.floor((Math.random() * vidSources.length));
        vidElement.src = vidSources[activeVideo];
        vidElement.addEventListener('ended', function(e) {
          // update the active video index
          activeVideo = (++activeVideo) % vidSources.length;
          if(activeVideo === vidSources.length){
            activeVideo = 0;
          }

          // update the video source and play
          vidElement.src = vidSources[activeVideo];
          vidElement.play();
        });

video {
 width:350px;
}

    <p>wowww you got it!</p>
    <video src="https://lutins.co.uk/carlos/one-carlostest.mp4" id="video" autoplay muted playsinline></video>

Answer 2

Change the randomIt variable into a callback, only this way, it will generate new random number each time it get call.

// I have change randomitem into a function with ofcourse a proper name
var getRandomItem = function() {
  return videos[Math.floor(Math.random()*videos.length)];
}

You should also call it properly like this:

//newvideo(randomitem[0].src) ->  change it to
newvideo(getrandomItem().src)

There might also other adjustments requires for your code to work.