Lista de reproducción de video o audio HTML 5

Question

¿Puedo usar una etiqueta <video> o <audio> para reproducir una lista de reproducción y controlarla?

Mi objetivo es saber cuándo un video/canción ha terminado de reproducirse y tomar la siguiente y cambiar su volumen.

Answer 1

se podía cargar siguiente clip en caso OnEnd así

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

Más información here

Answer 2

No hay forma de definir una lista de reproducción usando solo una etiqueta <video> o <audio>, pero hay formas de controlarlas, para que pueda simular una lista de reproducción usando JavaScript. Consulte las secciones 4.8.7, 4.8.9 (especialmente 4.8.9.12) del HTML5 spec. Es de esperar que la mayoría de los métodos y eventos se implementen en navegadores modernos como Chrome y Firefox (últimas versiones, por supuesto).

Answer 3

Se ha hecho allí: http://www.jezra.net/projects/pageplayer

Answer 4

Sí, sólo tiene que apuntar su etiqueta src para un archivo de lista de reproducción .m3u. Un archivo .m3u es fácil de construir -

#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 

----- ----- ACTUALIZACIÓN

Bueno, resulta que los archivos de lista de reproducción M3U son soportados en el iPhone, pero no mucho más, incluido Safari 5, que es algo triste. No estoy seguro acerca de los teléfonos con Android, pero dudo que lo soporten, ya que Chrome no lo hace. Perdón por la desinformación.

Answer 5

debería echar un vistazo a Popcorn.js - un marco Javascript para interactuar con Html5: http://popcornjs.org/documentation

Answer 6

jPlayer es una fuente libre y abierto HTML5 de audio y vídeo de la biblioteca que usted puede encontrar útil.Tiene soporte para listas de reproducción construido en: http://jplayer.org/

Answer 7

creé un violín de JS para esta aquí:

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

En primer lugar, el marcado HTML se parece a esto:

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

En segundo lugar, su código JavaScript a través de la biblioteca JQuery se verá así:

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

Y por último pero no menos importante, el 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

que no estaba satisfecho con lo que ofrecían, así que aquí está mi propuesta, usando 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> 

es suficiente con editar el playlist array, y listo

Answer 9

Optimicé un poco el código javascript de cameronjonesweb. Ahora puedes agregar los clips a la matriz. Todo lo demás se hace automáticamente.

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>