我是否可以使用<video>
或<audio>
标签来播放和控制播放列表?
我的目标是知道一段视频/歌曲何时播放完毕,并拍摄下一段视频/歌曲并改变其音量。
发布于 2010-03-31 18:39:33
您可以像这样在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
发布于 2012-10-19 03:38:49
我在这里创建了一个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;
}
发布于 2016-11-29 18:21:17
我对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>
https://stackoverflow.com/questions/2551859
复制相似问题