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>