我可以使用<video>或<audio>标签来播放播放列表并控制它们吗？
我的目标是知道视频/歌曲何时播放完毕并播放下一个并更改其音量。
HTML 5 视频或音频播放列表
IT技术
javascript
html
audio
video
2021-01-21 18:20:45
6个回答
你可以像这样在 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 />
更多信息在这里
我在这里创建了一个 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;
}
我稍微优化了来自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>
你应该看看 Popcorn.js - 一个与 Html5 交互的 javascript 框架：http ://popcornjs.org/documentation
jPlayer 是一个免费的开源 HTML5 音频和视频库，您可能会发现它很有用。它支持内置的播放列表：http : //jplayer.org/
其它你可能感兴趣的问题