Javascript HTML 5 视频或音频播放列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2551859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 video or audio playlist
提问by xdevel2000
Can I use a <video>or <audio>tag to play a playlist, and to control them?
我可以使用<video>或<audio>标签来播放播放列表并控制它们吗？
My goal is to know when a video/song has finished to play and take the next and change its volume.
我的目标是知道视频/歌曲何时播放完毕并播放下一个并更改其音量。
采纳答案by markcial
you could load next clip in the onend event like that
你可以像这样在 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 />
More information here
更多信息在这里
回答by Maziar Barzi
I created a JS fiddle for this here:
我在这里创建了一个 JS 小提琴：
http://jsfiddle.net/Barzi/Jzs6B/9/
http://jsfiddle.net/Barzi/Jzs6B/9/
First, your HTML markup looks like this:
首先，您的 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>
Second, your JavaScript code via JQuery library will look like this:
其次，通过 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")
})
})?
And last but not least, your CSS:
最后但并非最不重要的是，您的 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;
}?
回答by Taurus
I optimized the javascript code from cameronjonesweb a little bit. Now you can just add the clips into the array. Everything else is done automatically.
我稍微优化了来自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>
回答by brendan
You should take a look at Popcorn.js - a javascript framework for interacting with Html5 : http://popcornjs.org/documentation
你应该看看 Popcorn.js - 一个与 Html5 交互的 javascript 框架：http://popcornjs.org/documentation
回答by yagoogaly
jPlayer is a free and open source HTML5 Audio and Video library that you may find useful. It has support for playlists built in: http://jplayer.org/
jPlayer 是一个免费的开源 HTML5 音频和视频库，您可能会发现它很有用。它支持内置的播放列表：http: //jplayer.org/
回答by Felix
There's no way to define a playlist using just a <video>or <audio>tag, but there are ways of controlling them, so you can simulate a playlist using JavaScript. Check out sections 4.8.7, 4.8.9 (especially 4.8.9.12) of the HTML5 spec. Hopefully the majority of methods and events are implemented on modern browsers such as Chrome and Firefox (latest versions, of course).
无法仅使用<video>或<audio>标签来定义播放列表，但有多种方法可以控制它们，因此您可以使用 JavaScript 模拟播放列表。查看HTML5 规范的4.8.7、4.8.9（尤其是 4.8.9.12）部分。希望大多数方法和事件都在现代浏览器上实现，例如 Chrome 和 Firefox（当然是最新版本）。
回答by Cannicide
Try this solution, it takes an array of soundtracksand plays all of them, playlist-style, and even loops the playlist. The following uses a little Jquery to shorten getting the audio element. If you do not wish to use Jquery, replace the first line of the javascript with var audio = document.getElementById("audio");and it will work the same.
试试这个解决方案，它需要一系列音轨并播放所有这些，播放列表样式，甚至循环播放列表。下面使用一个小 Jquery 来缩短获取音频元素的时间。如果您不想使用 Jquery，请将 javascript 的第一行替换为var audio = document.getElementById("audio");，它会起作用。
Javascript:
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:
HTML：
<audio id="audio" controls>
<source src="" />
</audio>
This will allow you to play as many songs as you want, in playlist style. Each song will start as soon as the previous one finishes. I do not believe this will work in Internet Explorer, but it's time to move on from that ancient thing anyways!
这将允许您以播放列表样式播放任意数量的歌曲。每首歌曲将在前一首歌曲结束后立即开始。我不相信这会在 Internet Explorer 中工作，但无论如何是时候从那个古老的东西继续前进了！
Just put any songs you want into the array tracks.listand it will play all of them one after the other. It also loops back to the first song once it's finished with the last one.
只需将您想要的任何歌曲放入数组中tracks.list，它就会一首接一首地播放所有歌曲。一旦完成最后一首歌曲，它还会循环回到第一首歌曲。
It's shorter than many of the answers, it accounts for as many tracks as you want, it's easily understandable, and it actually loads the audio before playing it (so it actually works), so I thought I would include it here. I could not find any sound files to use in a running snippet, but I tested it with 3 of my own soundtracks on Chrome and it works. The onendedmethod, which detects the endedevent, also works on all browsers except Internet Explorer according to caniuse.
它比许多答案都短，它包含了你想要的尽可能多的音轨，它很容易理解，而且它实际上在播放之前加载了音频（所以它确实有效），所以我想我会把它包括在这里。我在正在运行的片段中找不到任何声音文件，但我在 Chrome 上用我自己的 3 个音轨对其进行了测试，并且可以正常工作。根据caniuse onended，检测ended事件的方法也适用于除Internet Explorer 之外的所有浏览器。
NOTE: Just to be clear, this works with both audio and video.
注意：明确地说，这适用于音频和视频。
回答by Marcus Pope
Yep, you can simply point your src tag to a .m3u playlist file. A .m3u file is easy to construct -
是的，您可以简单地将 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
-----UPDATE-----
- - -更新 - - -
Well, it turns out playlist m3u files aresupported on the iPhone, but not on much else including Safari 5 which is kind of sad. I'm not sure about Android phones but I doubt they support it either since Chrome doesn't. Sorry for the misinformation.
好吧，事实证明播放列表 m3u 文件在 iPhone上受支持，但在包括 Safari 5 在内的许多其他设备上不支持，这有点令人伤心。我不确定 Android 手机，但我怀疑他们是否支持它，因为 Chrome 不支持。对错误信息表示抱歉。
回答by Kelly Bang
To add to the current answers, here is a playlist of videos which works with separate subtitle files. At the end of the playlist, it will go to endPage
要添加到当前的答案中，这里有一个使用单独字幕文件的视频播放列表。在播放列表的末尾，它将转到 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>
回答by MrVaykadji
I wasn't satisfied with what was offered, so here's my proposal, using jQuery :
我对所提供的内容不满意，所以这是我的建议，使用 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>
You only have to edit the playlistarray, and you're done
你只需要编辑playlist数组，就大功告成了
