【发布时间】：2011-02-02 20:34:49
【问题描述】：
我可以使用<video> 或<audio> 标签来播放播放列表并对其进行控制吗？
我的目标是知道视频/歌曲何时播放完毕，然后播放下一个并改变音量。
【问题讨论】：
-
+1 表示对没有闪存的新技术感兴趣
标签： javascript html audio video
【发布时间】：2011-02-02 20:34:49
【问题描述】：
无法仅使用<video> 或<audio> 标记来定义播放列表，但有一些方法可以控制它们，因此您可以使用JavaScript 模拟播放列表。查看HTML5 spec 的第 4.8.7、4.8.9 节（尤其是 4.8.9.12）。希望大多数方法和事件都在现代浏览器上实现，例如 Chrome 和 Firefox（当然是最新版本）。
【讨论】：
你可以像这样在 onend 事件中加载下一个剪辑
<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.onended = function(){
videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />
更多信息here
【讨论】：
-
这不只是播放2个文件，播放10个音频文件怎么样
-
我认为您所要做的就是创建一个 URL 数组（我们称之为 myArray），创建一个 var i = 1，最初将 nextVideo 设置为 myArray[0]，并在 videoPlayer 下。 src = nextVideo;把 nextVideo = myArray[i];我++；这样每次当前视频结束时，都会加载下一个视频，并且下一个 url 将准备好。 PS。抱歉完全没有格式，我在工作，只是想快速回答这个问题
-
对于那些希望在第二个视频结束后循环到第一个视频的人，这里是对上述答案的一个非常简单的改编： 小提琴：jsfiddle.net/P38aV
【讨论】：
是的，您可以简单地将您的 src 标签指向一个 .m3u 播放列表文件。 .m3u 文件很容易构建 -
#hosted mp3's need absolute paths but file system links can use relative paths
http://servername.com/path/to/mp3.mp3
http://servername.com/path/to/anothermp3.mp3
/path/to/local-mp3.mp3
-----更新-----
好吧，事实证明播放列表 m3u 文件在 iPhone 上受支持，但在包括 Safari 5 在内的许多其他设备上都不支持，这有点令人难过。我不确定 Android 手机，但我怀疑它们是否支持它，因为 Chrome 不支持。很抱歉提供错误信息。
【讨论】：
-
这不是真的。 HTML5 规范不支持 m3u 播放列表文件，但是有一个 jquery 插件 plugins.jquery.com/plugin-tags/m3u 添加了支持。
你应该看看 Popcorn.js - 一个用于与 Html5 交互的 javascript 框架：http://popcornjs.org/documentation
【讨论】：
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>
【讨论】：
-
如果您添加以下内容，您可以简单地列出您的数组中的所有多媒体文件（而不是将第一个编码为元素上的 src attr。
if(!audioPlayer.src){ audioPlayer.src = nextSong[currentSong]; } -
另外，您必须添加
videoPlayer.play()才能在 Microsoft Edge 中自动播放下一首歌曲。 -
很遗憾，不能在视频元素中使用“循环”属性。
试试这个解决方案，它获取一组音轨并播放所有这些音轨，播放列表样式，甚至循环播放列表。下面使用一点 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，它就会一个接一个地播放所有歌曲。完成最后一首歌曲后，它还会循环回到第一首歌曲。
它比许多答案都短，它包含尽可能多的轨道，它很容易理解，并且它实际上在播放之前加载了音频（所以它确实有效），所以我想我会把它包括在这里。我找不到任何声音文件可以在运行的 sn-p 中使用，但我在 Chrome 上用我自己的 3 个音轨对其进行了测试，它可以工作。根据caniuse，检测ended事件的onended方法也适用于除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>
【讨论】：
【讨论】：