how to play multiple mediaelementplayer one by one in javascript

Question

I have three videos shown on the website:

<video id="player0" class="video-player" muted preload="metadata"...>....</video>

<video id="player1" class="video-player" muted preload="metadata"...>....</video>

<video id="player2" class="video-player" muted preload="metadata"...>....</video>

and in my javascript, I have:

$(document).ready(function() {
    $('.video-player').mediaelementplayer({ 
        alwaysShowControls:true,
        videoVolume: 'vertical',            
        features: ['playpause','current','progress','duration','tracks','volume','fullscreen','mobileautomute'],        
        success: function (mediaElement, domObject) {
            var target = document.body.querySelectorAll('.video-player'); 
            for (a=0;a<target.length;a++){ 
                target[a].style.visibility = 'visible'; 
            } 
            mediaElement.addEventListener('loadedmetadata', function() {
                mediaElement.play();
            }, false);              
        }
    });
});

With this code, all three videos load together and it random pick one video to autoplay, and cannot go to another one to play automatically.

How can I make all three videos all loaded at first time, but play one by one in video 0 to video 1 then video 2?

Thanks.

Answer 1

I figure it how to fix my problem:

1. changed all the preload form metadata to none, as below

<video id="player0" class="video-player" muted preload="metadata"...>....</video>

to

<video id="player0" class="video-player" muted preload="none"...>....</video>

2. Revised the javascript to below:

$(document).ready(function() {          
    $('.video-player').mediaelementplayer ({ 
        pauseOtherPlayers: true,            
        alwaysShowControls:true, 
        videoVolume: 'vertical', 
        autoplay: true, 
        features: ['playpause','current','progress','duration','tracks','volume','fullscreen','mobileautomute'], 
        success: function (mediaElement, domObject) {               
            var target = document.body.querySelectorAll('.video-player'); 
            for (a=0;a<target.length;a++){ 
                target[a].style.visibility = 'visible'; 
            }
            var theID = mediaElement['attributes']['id'].value;             
            if (theID == "player0"){
                mediaElement.play();
                mediaElement.addEventListener('ended', function() {
                    var videoElem = document.getElementById("player1");                     
                    videoElem.play();                       
                });
            } else if (theID == "player1"){
                mediaElement.addEventListener('ended', function() {
                    var videoElem = document.getElementById("player2");                     
                    videoElem.play();                       
                });
            }               
        } 
    }); 
});