HTML 5视频或音频播放列表

您应该看看 Popcorn.js-一个用于与 Html5: http://popcornjs.org/documentation交互的 javascript 框架

JPlayer 是一个免费的、开源的 HTML5音频和视频库，您可能会发现它很有用。它支持内置的播放列表: Http://jplayer.org/

我在这里创建了一个 JS 小提琴:

Http://jsfiddle.net/barzi/jzs6b/9/

首先，HTML 标记如下所示:

<video id="videoarea" controls="controls" poster="" src=""></video>


<ul id="playlist">
<li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
<li movieurl="VideoURL2.webm">Second video</li>
...
...
</ul>

其次，通过 JQuery 库编写的 JavaScript 代码如下所示:

$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})​

最后但并非最不重要的是，你的 CSS:

#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:640px;
height:480px;
margin:10px;
border:1px solid silver;
}​

我对所提供的内容并不满意，所以这里是我的建议，使用 jQuery:

            <div id="playlist">
<audio id="player" controls preload="metadata" volume="1">
<source src="" type="audio/mpeg">
Sorry, this browser doesn't support HTML 5.0
</audio>
<ul></ul>
</div>


<script>
var folder = "audio";
var playlist = [
"example1.mp3",
"example2.mp3"
];
for (var i in playlist) {
jQuery('#playlist ul').append('<li>'+playlist[i]+'</li>');
}


var player = document.getElementById('player');
var playing = playlist[0];
player.src = folder + '/' + playing;


function display(id) {
var list = jQuery('#playlist ul').children();
list.removeClass('playing');
jQuery(list[id]).addClass('playing');
}


display(0);


player.onended = function(){
var ind_next = playlist.indexOf(playing) + 1;


if (ind_next !== 0) {
player.src = folder + '/' + playlist[ind_next];
playing = player.src;
display(ind_next)
player.play();
}
}
</script>

您只需编辑 playlist数组，就完成了

我对 cameronjonesweb 的 javascript 代码进行了一些优化。现在您可以将剪辑添加到数组中。其他一切都是自动完成的。

<video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();">Your browser does not support the video tag.</video>


<script>
var nextsrc = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4"];
var elm = 0; var Player = document.getElementById('Player');
Player.onended = function(){
if(++elm < nextsrc.length){
Player.src = nextsrc[elm]; Player.play();
}
}
</script>

尝试这个解决方案，它的 需要一系列的配乐和播放所有这些，播放列表风格，甚至循环播放列表。下面使用一个小 Jquery 来缩短获取音频元素的时间。如果您不想使用 Jquery，那么将 javascript 的第一行替换为 var audio = document.getElementById("audio");，它的工作原理也是一样的。

Javascript:

var audio = $("#audio")[0];
var tracks = {
list: ["track_01.mp3", "track_02.mp3", "track_03.mp3"], //Put any tracks you want in this array
index: 0,
next: function() {
if (this.index == this.list.length - 1) this.index = 0;
else {
this.index += 1;
}
},
play: function() {
return this.list[this.index];
}
}


audio.onended = function() {
tracks.next();
audio.src = tracks.play();
audio.load();
audio.play();
}


audio.src = tracks.play();

HTML:

<audio id="audio" controls>
<source src="" />
</audio>

这将允许你播放多少歌曲，你想要的播放列表风格。每首歌都会在前一首歌结束后马上开始。我不相信这会在 Internet Explorer 上奏效，但无论如何是时候从那个古老的东西继续前进了！

只要把任何你想要的歌曲到数组 tracks.list，它将播放所有这些一个接一个。一旦完成了最后一首歌，它还会循环回到第一首歌。

它比许多答案都要短，你想要多少曲目它就有多少曲目，它很容易理解，而且它实际上在播放它之前加载了音频(所以它实际上可以工作) ，所以我想我应该把它包括在这里。我找不到任何声音文件在一个运行片段使用，但我测试了我自己的3个声道在 Chrome 和它的工作。检测 ended事件的 onended方法也适用于除 caniuse Internet Explorer 之外的所有浏览器。

注意: 先说清楚，这个可以同时处理音频和视频。

为了增加当前的答案，这里有一个视频播放列表，可以使用单独的字幕文件。在播放列表的末尾，它将转到 endPage

<video id="video" controls autoplay preload="metadata">
<source src="vid1.mp4" type="mp4">
<track id="subs" label="English" kind="subtitles" srclang="en" src="sub1.vtt" default>
</video>


<script type="text/javascript">
var endPage = "duckduckgo.com";
var playlist = [
{
'file': 'vid2.mp4',
'subtitle': 'sub2.vtt'
},{
'file': 'vid3.mp4',
'subtitle': 'sub3.vtt'
}
]
var i = 0;
var videoPlayer = document.getElementById('video');
var subtitles = document.getElementById('subs');
videoPlayer.onended = function(){
if(i < playlist.length){
videoPlayer.src = playlist[i].file;
subtitles.src = playlist[i].subtitle;
i++;
} else {
console.log("We are leaving")
document.location.href = endPage;
}
}
</script>

您可以添加一个事件侦听器，以“ end”作为第一个参数

像这样:

Https://stackoverflow.com/a/2880950/6839331