HTML 5video或audio播放列表

我可以使用<video><audio>标签播放播放列表并控制它们吗?

我的目标是要知道什么时候video/歌曲已经播放完毕,并进行下一个改变音量。

你可以像这样加载下一个剪辑

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

更多信息在这里

我在这里创build了一个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; }​ 

你应该看看Popcorn.js – 与Html5交互的javascript框架: http ://popcornjs.org/documentation

jPlayer是一个免费的开源HTML5audio和video库,您可能会觉得有用。 它支持播放列表: http : //jplayer.org/

没有办法使用<video><audio>标签来定义播放列表,但是有些方法可以控制它们,所以您可以使用JavaScript来模拟播放列表。 查看HTML5规范的第4.8.7节,第4.8.9节(特别是第4.8.9.12节)。 希望大多数方法和事件都是在现代浏览器(如Chrome和Firefox)(当然是最新版本)上实现的。

是的,你可以简单地将你的src标签指向.m3u播放列表文件。 .m3u文件很容易构build –

 #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 

—– —–更新

那么,事实certificate,在iPhone 支持播放列表M3U文件,但没有其他很多,包括Safari 5,这是一种伤心。 我不确定Android手机,但我怀疑他们是否支持,因为Chrome不支持。 对错误信息抱歉。

我优化了一些从cameronjonesweb的JavaScript代码。 现在,您可以将剪辑添加到数组中。 其他一切都是自动完成的。

 var nextVideo = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/movie.mp4"]; var curVideo = 0; var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.onended = function(){ ++curVideo; if(curVideo < nextVideo.length){ videoPlayer.src = nextVideo[curVideo]; } } 
 <video width="320" height="240" autoplay controls id="videoPlayer"> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 

它已经完成了: http : //www.jezra.net/projects/pageplayer

我对所提供的内容不满意,所以这里是我的build议,使用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> 

您只需编辑playlist数组,即可完成