我有这样的代码（例如）：
<script>
$('audio').mediaelementplayer();
</script>
<audio id="mejs" controls="controls">
<source src="/media/file-2.mp3" type="audio/mp3" />
</audio>
<ul class="mejs-list">
<li>/media/file-1.mp3</li>
<li class="current">/media/file-2.mp3</li>
<li>/media/file-3.mp3</li>
</ul>
我需要按队列（一个接一个）播放列表中的音频文件。
在完成播放当前文件并开始播放下一个文件后，如何从列表中更改下一个文件的音频来源？
更新：关于mediaelement.js and playlist的相关主题，但答案是关于使用许多mediaelementplayer（）实例。
答案 0 :(得分：22)
为mediaelement.js 制作基本播放列表的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="../build/jquery.js"></script>
<script src="../build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
<style>
.mejs-list li:hover {
background: #ffa;
cursor: pointer;
}
.mejs-list li.current {
background: #cddfff;
}
</style>
<script>
$(function(){
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
mediaElement.addEventListener('ended', function (e) {
mejsPlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mejs-list li').click(function() {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).text();
$('audio#mejs:first').each(function(){
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mejsPlayNext(currentPlayer) {
if ($('.mejs-list li.current').length > 0){ // get the .current song
var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if '+audio_src);
}else{ // if there is no .current class
var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif '+audio_src);
}
if( $(current_item).is(':last-child') ) { // if it is last - stop playing
$(current_item).removeClass('current');
}else{
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
</head>
<body>
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li class="current">../media/audio-01.mp3</li>
<li>../media/audio-02.mp3</li>
<li>../media/audio-03.mp3</li>
</ul>
</body>
</html>
答案 1 :(得分：9)
现在有一个插件可以解决这个问题 - https://github.com/duozersk/mep-feature-playlist
答案 2 :(得分：0)
看看MediaElement.js的YouTube Playlist。它提供了YouTube视频的播放列表，但可以轻松更新以支持其他视频格式