javascript - reproducir - Lista de reproducción de video o audio HTML 5

reproductor de video html5 gratis

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 tocar y tomar el siguiente y cambiar su volumen.

Answer 1

Creé un violín JS para esto aquí:

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

En primer lugar, su marcado HTML se ve así:

<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, su 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 2

Deberías echar un vistazo a Popcorn.js, un marco de JavaScript para interactuar con Html5: http://popcornjs.org/documentation

Answer 3

No estaba satisfecho con lo que se ofreció, 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>

Solo tiene que editar la matriz de la playlist y listo

Answer 4

No hay forma de definir una lista de reproducción usando solo una etiqueta <video> o <audio> , pero hay formas de controlarlas, de modo que pueda simular una lista de reproducción usando JavaScript. Consulte las secciones 4.8.7, 4.8.9 (especialmente 4.8.9.12) de las especificaciones de HTML5 . 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 5

Optimicé un poco el código de 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(){
  ++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>

Answer 6

Sí, simplemente puede apuntar su etiqueta src a 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

-----ACTUALIZAR-----

Bueno, resulta que los archivos m3u de la lista de reproducción son compatibles con el iPhone, pero no mucho más, incluido Safari 5, lo que es un poco 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 7

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

Answer 8

jPlayer es una biblioteca de audio y video HTML5 gratuita y de código abierto que puede serle útil. Tiene soporte para listas de reproducción integradas: http://jplayer.org/

Answer 9

puedes cargar el siguiente clip en el evento onend como ese

<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