2010-03-31 26 views
55

Posso utilizzare un tag <video> o <audio> per riprodurre una playlist e controllarli?HTML 5 playlist video o audio

Il mio obiettivo è sapere quando un video/brano ha finito di suonare e prendere quello successivo e cambiarne il volume.

+26

+1 per interesse per le nuove tecnologie senza flash – markcial

risposta

52

è possibile caricare clip successiva in caso onend come quello

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

Maggiori informazioni here

+0

sarà presente non solo giocare 2 file, che ne dici di gioco dicono 10 file audio – defau1t

+1

penso che tutto quello che avrei dovuto fare è creare un array di URL (chiamiamolo myArray), crea un var i = 1, inizialmente impostato nextVideo su myArray [0] e sotto videoPlayer.src = nextVideo; metti nextVideo = myArray [i]; i ++; In questo modo, ogni volta che termina il video corrente, verrà caricato il video successivo e l'url successivo sarà pronto. PS. scusa per la completa mancanza di formattazione, sono al lavoro e volevo solo rispondere rapidamente – DanTheMan

+2

Per coloro che desiderano effettuare il loop al primo video dopo che il secondo termina qui è un adattamento molto semplice della risposta di cui sopra: Fiddle: http://jsfiddle.net/P38aV/ – cameronjonesweb

1

Non c'è modo di definire una playlist utilizzando solo un tag <video> o <audio>, ma ci sono modi per controllarli, in modo da poter simulare una playlist utilizzando JavaScript. Controlla le sezioni 4.8.7, 4.8.9 (in particolare 4.8.9.12) di HTML5 spec. Speriamo che la maggior parte dei metodi e degli eventi siano implementati su browser moderni come Chrome e Firefox (ultime versioni, ovviamente).

1

Sì, si può semplicemente puntare il tag src a un file di playlist .m3u. Un file .m3u è facile da costruire -

#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 

----- ----- AGGIORNAMENTO

Beh, si scopre file M3U playlist sono supportato su l'iPhone, ma non su molto altro incluso Safari 5 che è un po 'triste. Non sono sicuro dei telefoni Android, ma dubito che lo supportino da quando Chrome non funziona. Scusa per la disinformazione.

+3

Questo in realtà non è vero. Le specifiche HTML5 non supportano i file di playlist di m3u, tuttavia esiste un plugin jquery http://plugins.jquery.com/plugin-tags/m3u che aggiunge il supporto. – huntaub

+0

è un po 'vero ...;) –

3

JPlayer è un libero e open source HTML5 audio e Videoteca che si possono trovare utili.Ha il supporto per le playlist costruito in: http://jplayer.org/

11

ho creato un violino JS per questo qui:

http://jsfiddle.net/Barzi/Jzs6B/9/

primo luogo, il codice HTML simile a questo:

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

In secondo luogo, il tuo codice JavaScript tramite libreria JQuery sarà simile al seguente:

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

E, ultimo ma non meno importante, il vostro 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; 
}​ 
0

non ero soddisfatto di quello che è stato offerto, quindi ecco la mia proposta, utilizzando 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> 

basta modificare il playlist array, e il gioco è fatto

1

Ho ottimizzato un po 'il codice javascript da cameronjonesweb. Ora puoi semplicemente aggiungere le clip nell'array. Tutto il resto è fatto automaticamente.

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>

Problemi correlati