HTML/JS - Background video. Autoplay a random video after the next one ends?-CodePudding

I'm creating a page where I have a list of 16 video's which I want to play at random each time the page loads. That works fine, but it will keep looping the current loaded video and not pick another random video. I did include an event listener when the video ends but it's not really doing anything.

HTML

<div >
    <video playsinline loop id ="intro" autoplay id="intro" muted></video>
</div>

Javascript

var videos = [
    [{type:'mp4', 'src':'./media/1.mp4'}],
    [{type:'mp4', 'src':'./media/2.mp4'}],
    [{type:'mp4', 'src':'./media/3.mp4'}],
    [{type:'mp4', 'src':'./media/4.mp4'}],
    [{type:'mp4', 'src':'./media/5.mp4'}],
    [{type:'mp4', 'src':'./media/6.mp4'}],
    [{type:'mp4', 'src':'./media/7.mp4'}],
    [{type:'mp4', 'src':'./media/8.mp4'}],
    [{type:'mp4', 'src':'./meida/9.mp4'}],
    [{type:'mp4', 'src':'./media/10.mp4'}],
    [{type:'mp4', 'src':'./media/11.mp4'}],
    [{type:'mp4', 'src':'./media/12.mp4'}],
    [{type:'mp4', 'src':'./media/13.mp4'}],
    [{type:'mp4', 'src':'./media/14.mp4'}],
    [{type:'mp4', 'src':'./media/15.mp4'}],
    [{type:'mp4', 'src':'./media/16.mp4'}],
];

var randomitem = videos[Math.floor(Math.random()*videos.length)];

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

function newvideo(src) {
    var vid = document.getElementById("intro");
    videoadd(vid,src ,'video/mp4');
    vid.autoplay = true;
    vid.load();
}

$(document).ready(function(){
    newvideo(randomitem[0].src)

    document.getElementById('intro').addEventListener('ended', myHandler,false);
    
    function myHandler(e) {
        newvideo(randomitem[0].src)
    }
})

I tried the video end event listener in the html with

<script>
    document.getElementById('intro').addEventListener('ended', myHandler,false);
    
    function myHandler(e) {
        newvideo(randomitem[0].src)
    }
</script>

I tried to implement it into the javascript itself but the function returned (e) is declared but it's value is never read.

CodePudding user response：

You can shuffle the array and call the videos in order from that.

let i = 0;
const randomVideos = videos
randomVideos.sort(() => (Math.random() > .5) ? 1 : -1); //shuffle

...

function myHandler(e) {
        newvideo(randomVideos[  i][0].src);
}

CodePudding user response：

Try with the onEnded event, instead of using add event listener :

 var backgroundVideo = document.getElementById('intro');
     backgroundVideo.onended = () => {
     //here you can change the src atribute to change the video and play it again
}

CodePudding user response：

You can do this by listening for the ended event on the video, and selecting a new random video when that fires. It would look something like this:

videoElement.addEventListener('ended', () => {
  // Select and play a new random video here
});

So in your code, you would add that listener in your $(document).ready handler:

document.getElementById('intro').addEventListener('ended', () => {
  newvideo(randomitem[0].src);
});

That will play a new random video each time the current one ends.