blocks|key|2020644|text|无法仅使用<video>或<audio>标签定义播放列表，但有一些方法可以控制它们，因此您可以使用JavaScript模拟播放列表。查看HTML5+spec的4.8.7、4.8.9节(特别是4.8.9.12节)。希望大多数方法和事件都能在现代浏览器上实现，比如Chrome和Firefox+(当然是最新版本)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2020645|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/html5/spec/Overview.html^0|5|7|D|7|1W|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>There's no way to define a playlist using just a <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code> 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 <a href="http://dev.w3.org/html5/spec/Overview.html" rel="nofollow noreferrer">HTML5 spec</a>. Hopefully the majority of methods and events are implemented on modern browsers such as Chrome and Firefox (latest versions, of course).</p>


blocks|key|1807121|text|您可以像这样在onend事件中加载下一个剪辑|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1807122|<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+/>|code-block|syntax|javascript|1807123|更多信息here|offset|length|1807124|entityMap|0|LINK|mutability|MUTABLE|url|http://www.whatwg.org/specs/web-apps/current-work/#video^0|0|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>you could load next clip in the onend event like that</p>

<pre><code>&lt;script type="text/javascript"&gt;
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.onended = function(){
    videoPlayer.src = nextVideo;
}
&lt;/script&gt;
&lt;video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls /&gt;
</code></pre>

<p>More information <a href="http://www.whatwg.org/specs/web-apps/current-work/#video" rel="noreferrer">here</a></p>


blocks|key|1807152|text|已经在那里完成了：http://www.jezra.net/projects/pageplayer|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1807153|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jezra.net/projects/pageplayer^0|9|14|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>It has been done there : <a href="http://www.jezra.net/projects/pageplayer" rel="nofollow noreferrer">http://www.jezra.net/projects/pageplayer</a></p>


blocks|key|1807171|text|您应该看看Popcorn.js+--一个用于与Html5交互的javascript框架：http://popcornjs.org/documentation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1807172|entityMap|0|LINK|mutability|MUTABLE|url|http://popcornjs.org/documentation^0|18|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You should take a look at Popcorn.js - a javascript framework for interacting with Html5 : <a href="http://popcornjs.org/documentation" rel="nofollow">http://popcornjs.org/documentation</a></p>


blocks|key|1807185|text|jPlayer是一个免费的开源HTML5音频和视频库，您可能会发现它很有用。它支持内置的播放列表：http://jplayer.org/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1807186|entityMap|0|LINK|mutability|MUTABLE|url|http://jplayer.org/^0|1D|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>jPlayer is a free and open source HTML5 Audio and Video library that you may find useful.  It  has support for playlists built in:
<a href="http://jplayer.org/" rel="nofollow">http://jplayer.org/</a> </p>


blocks|key|1807215|text|我在这里创建了一个JS小提琴：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1807216|http://jsfiddle.net/Barzi/Jzs6B/9/|offset|length|1807217|首先，您的HTML标记如下所示：|1807218|<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>|code-block|syntax|javascript|1807219|其次，通过JQuery库编写的JavaScript代码将如下所示：|1807220|$(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")
++++})
})​|1807221|最后但并非最不重要的是，您的CSS：|1807222|#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;
}​|1807223|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Y|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]]]

<p>I created a JS fiddle for this here: </p>

<p><a href="http://jsfiddle.net/Barzi/Jzs6B/9/" rel="noreferrer">http://jsfiddle.net/Barzi/Jzs6B/9/</a></p>

<p>First, your HTML markup looks like this:</p>

<pre><code>&lt;video id="videoarea" controls="controls" poster="" src=""&gt;&lt;/video&gt;

&lt;ul id="playlist"&gt;
    &lt;li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg"&gt;First video&lt;/li&gt;
    &lt;li movieurl="VideoURL2.webm"&gt;Second video&lt;/li&gt;
    ...
    ...
&lt;/ul&gt;
</code></pre>

<p>Second, your JavaScript code via JQuery library will look like this:</p>

<pre><code>$(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")
    })
})​
</code></pre>

<p>And last but not least, your CSS:</p>

<pre><code>#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;
}​
</code></pre>


blocks|key|1807323|text|我对所提供的内容不满意，所以这是我的建议，使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1807324|++++++++++++<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>'%2Bplaylist[i]%2B'</li>');
++++++++++++++++}

++++++++++++++++var+player+=+document.getElementById('player');
++++++++++++++++var+playing+=+playlist[0];
++++++++++++++++player.src+=+folder+%2B+'/'+%2B+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)+%2B+1;

++++++++++++++++++++if+(ind_next+!==+0)+{
++++++++++++++++++++++++player.src+=+folder+%2B+'/'+%2B+playlist[ind_next];
++++++++++++++++++++++++playing+=+player.src;
++++++++++++++++++++++++display(ind_next)
++++++++++++++++++++++++player.play();
++++++++++++++++++++}
++++++++++++++++}
++++++++++++</script>|code-block|syntax|javascript|1807325|您只需编辑playlist数组，就完成了|offset|length|style|CODE|1807326|entityMap^0|0|0|5|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I wasn't satisfied with what was offered, so here's my proposal, using jQuery  :</p>

<pre><code>            &lt;div id="playlist"&gt;
                &lt;audio id="player" controls preload="metadata" volume="1"&gt;
                  &lt;source src="" type="audio/mpeg"&gt;
                  Sorry, this browser doesn't support HTML 5.0
                &lt;/audio&gt;
                &lt;ul&gt;&lt;/ul&gt;
            &lt;/div&gt;

            &lt;script&gt;
                var folder = "audio";
                var playlist = [
                    "example1.mp3",
                    "example2.mp3"
                ];
                for (var i in playlist) {
                    jQuery('#playlist ul').append('&lt;li&gt;'+playlist[i]+'&lt;/li&gt;');
                }

                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();
                    }
                }
            &lt;/script&gt;
</code></pre>

<p>You only have to edit the <code>playlist</code> array, and you're done</p>


blocks|key|2020851|text|我对cameronjonesweb上的javascript代码进行了一些优化。现在，您只需将剪辑添加到数组中。其他的一切都是自动完成的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2020852|<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(%2B%2Belm+<+nextsrc.length){+++++++++
+++++++++Player.src+=+nextsrc[elm];+Player.play();
++++}+
}
</script>|code-block|syntax|javascript|2020853|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>&lt;video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();"&gt;Your browser does not support the video tag.&lt;/video&gt;

&lt;script&gt;
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 &lt; nextsrc.length){         
         Player.src = nextsrc[elm]; Player.play();
    } 
}
&lt;/script&gt;
</code></pre>


blocks|key|2020870|text|为了补充目前的答案，这里有一个视频播放列表，它与单独的字幕文件一起工作。在播放列表的末尾，它将显示为endPage|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2020871|<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%2B%2B;
++++}+else+{
++++++++console.log("We+are+leaving")
++++++++document.location.href+=+endPage;
++++}
}
</script>|code-block|syntax|javascript|2020872|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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</p>

<pre><code>&lt;video id="video" controls autoplay preload="metadata"&gt;
   &lt;source src="vid1.mp4" type="mp4"&gt;
   &lt;track id="subs" label="English" kind="subtitles" srclang="en" src="sub1.vtt" default&gt;
&lt;/video&gt;

&lt;script type="text/javascript"&gt;
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 &lt; playlist.length){
        videoPlayer.src = playlist[i].file;
        subtitles.src = playlist[i].subtitle;
        i++;
    } else {
        console.log("We are leaving")
        document.location.href = endPage;
    }
}
&lt;/script&gt;
</code></pre>


blocks|key|1807382|text|您可以添加第一个参数为‘add’的事件监听器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1807383|如下所示：|1807384|https://stackoverflow.com/a/2880950/6839331|offset|length|1807385|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

<p>You can add an event listener with 'ended' as the first param</p>
<p>Like this :</p>
<p><a href="https://stackoverflow.com/a/2880950/6839331">https://stackoverflow.com/a/2880950/6839331</a></p>


<p>Can I use a <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code> tag to play a playlist, and to control them?</p>

<p>My goal is to know when a video/song has finished to play and take the next and change its volume.</p>


HTML 5 video or audio playlist

jQuery

HTML5

我是否可以使用<video>或<audio>标签来播放和控制播放列表？我的目标是知道一段视频/歌曲何时播放完毕，并拍摄下一段视频/歌曲并改变其音量。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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