HTML 5视频或音频播放列表

Question

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

我的目标是知道什么时候视频/歌曲已经播放完毕，然后进行下一步并更改音量。

Answer 1

，你可以在这样的

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

更多信息onend事件here

Answer 2

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

Answer 3

它已经做了有加载下一个片段：http://www.jezra.net/projects/pageplayer

Answer 4

是的，你可以在你的src标签简单地指向一个.m3u播放列表文件。一个m3u格式的文件很容易构造 -

#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 

----- ----- UPDATE

哦，原来播放列表的m3u文件是支持iPhone，但没有其他很多，包括Safari 5，这是有点伤心。我不确定Android手机，但我怀疑他们是否支持它，因为Chrome不支持。对错误信息抱歉。

Answer 5

你应该看看Popcorn.js - JavaScript框架包含HTML5互动：http://popcornjs.org/documentation

Answer 6

jPlayer是一个自由和开放源码的HTML5音频和视频库，可能对你有用。它有内置的播放列表支持： http://jplayer.org/

Answer 7

我创建了一个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; 
}​ 

Answer 8

我并不满足于被提供了，所以这里是我的建议，使用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 array，你就完成了

Answer 9

我从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(){ 
 
\t \t ++curVideo; 
 
    if(curVideo < nextVideo.length){  \t \t 
 
     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>