如何在javascript中逐个播放多个媒体元素播放器

Question

我在网站上展示了三个视频：

<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>

在我的javascript中，我有：

$(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);              
        }
    });
});

使用此代码，所有三个视频一起加载，它随机选择一个视频进行自动播放，而不能转到另一个视频进行自动播放。

如何让所有三个视频都在第一时间加载，但在视频0到视频1然后视频2中逐个播放？

谢谢。

Answer 1

我想如何解决我的问题：

1. 将所有预加载表单元数据更改为无，如下

所示

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

至

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

1. 将javascript修改为以下内容：

$(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();                       
                });
            }               
        } 
    }); 
});