如何在javascript中一一播放多个mediaelementplayer答案

【问题标题】：how to play multiple mediaelementplayer one by one in javascript如何在javascript中一一播放多个mediaelementplayer
【发布时间】：2021-01-26 07:54:10
【问题描述】：

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

<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 一个接一个地播放？

谢谢。

【问题讨论】：

标签： javascript jquery mediaelement.js

【解决方案1】：

我想知道如何解决我的问题：

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

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

到

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

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

【讨论】：