首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML 5视频或音频播放列表

HTML 5视频或音频播放列表
EN

Stack Overflow用户
提问于 2010-03-31 17:46:33
回答 10查看 142.1K关注 0票数 70

我是否可以使用<video><audio>标签来播放和控制播放列表?

我的目标是知道一段视频/歌曲何时播放完毕,并拍摄下一段视频/歌曲并改变其音量。

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 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

票数 67
EN

Stack Overflow用户

发布于 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;
}​
票数 14
EN

Stack Overflow用户

发布于 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>
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2551859

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档