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

问题描述

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

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

谢谢。

解决方法

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

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

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

到

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

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