Reproductor de video HTML5 con playlist

[heart_rocker]

Estimados, agradezco que puedan ayudarme con un problema que tengo...
He buscado por todos lados como hacer una playlist en un reproductor de video creado en HTML5 con la etiqueta <video> con un código como este:

Código HTML:

<video autoplay controls>
<source src="video1.mp4" type="video/mp4" />
</video>
 

Mi idea es que luego de terminar el primer video se reproduzca el siguiente y luego el siguiente, hasta que termine la playlist y se reinicie la reproducción siempre en la misma página y sin que la playlist sea visible en ningún lado...

Actualmente, tengo un flowplayer en mi web y se vé bien, reproduce un video tras otro sin problema, pero al ver el sitio en android tengo problemas con flash, por esta razón necesito cambiarlo por un reproductor HTML5...

El tema es que la única pista que he encontrado en internet para realizar este cambio es hacer la playlist con javascript y listas <ul> y <li>, pero javascript es un lenguaje desconocido para mí y no he podido lograr nada...

Agradezco cualquier ayuda o pista que me ayude a terminar con esta misión... saludos

[Alexis88]

Recuerdo que hace un tiempo, hice algo muy similar a lo que buscas, pero con canciones, no vídeos, sin embargo, ahora que vi esto, me animé a hacer uno, aquí te lo muestro:

Código HTML:

<label id="info"></label>
<video id="reproductor" controls></video>
 

Código Javascript:

window.onload = function playlist(){
     var reproductor = document.getElementById("reproductor"),
         videos = ["video1", "video2", "video3"],
         info = document.getElementById("info");
 
     info.innerHTML = "Vídeo: " + videos[0];
     reproductor.src = videos[0] + ".mp4";
     reproductor.play();
 
     if (reproductor.ended)
          function next() {
               var nombreActual = info.innerHTML.split(": ")[1];
               var actual = videos.indexOf(nombreActual);
               this.src = (actual == videos.length - 1 ? videos[0] : videos[actual + 1]) + ".mp4";
               info.innerHTML = "Vídeo: " + videos[actual + 1];
               this.play();
          };
}
 

En el documento, tenemos una etiqueta en la que mostraré el nombre del vídeo y un elemento de video, que será nuestro reproductor de vídeos. En el script, cuando haya cargado el DOM y contenido de la página, ejecutaremos la función playlist(), en la cual, declaramos algunas variables, como "reproductor" que tomará al elemento de vídeo del documento, "videos" que será un array con los nombres de los vídeos que tengo en una carpeta e "info", que tomará la etiqueta que se encuentra en el documento.

En la primera vez que se ejecute esto, le asignamos a "info", el nombre del primer elemento del array, es decir, el del primer vídeo, luego, le asignamos al reproductor de vídeos, el primer vídeo del array, concantenando su nombre con la extensión ".mp4", esto debido a que mis vídeos los tengo en dicho formato, pero también pueden ser de tipo "webm" y "ogg". Finalmente, inicio la reproducción del vídeo con el evento "play".

Por último, verificamos si la reproducción del vídeo actual ha terminado, utilizando para ello el evento "ended", de ser así, tomamos el nombre del vídeo que se encuentre luego de los dos puntos y espacio en la etiqueta "info", buscamos la posición de dicho nombre en el array de vídeos y si es igual al último de ellos, le asignamos al reproductor, el primer vídeo del array, caso contrario, le asignamos el siguiente, siempre concatenando el nombre con la extensión ".mp4", aunque podría colocarla junto a cada nombre en el array, pero tendrías que separala del nombre para mostrar solamente el nombre en la etiqueta "info". De este modo, la reproducción de los vídeos será continua. Una vez asignado el nuevo vídeo al reproductor, lo reproducimos, utilizando nuevamente el evento "play".

Puedes leer más acerca de la etiqueta "video" desde aquí y sobre sus eventos y propiedades desde aquí.

Saludos

[heart_rocker]

Gracias por la respuesta Alexis... pero no está funcionando bien... sólo reproduce el primer video y luego se detiene... traté de entender la lógica del script, pero no veo nada extraño que pueda afectar el funcionamiento... tendrás alguna solución, por favor???

[Alexis88]

Cambié un poco la forma en la que se detecta el fin de la reproducción del vídeo, añadiéndole al reproductor, un evento escuchador, que en este caso, es el evento ended, para que cuando ocurra, se ejecute una función con determinadas instrucciones.

Código Javascript:

window.onload = function playlist(){
        var reproductor = document.getElementById("reproductor"),
        videos = ["video1", "video2", "video3"],
    info = document.getElementById("info");
 
    info.innerHTML = "Vídeo: " + videos[0];
    reproductor.src = videos[0] + ".mp4";
    reproductor.play();
 
    reproductor.addEventListener("ended", function() {
        var nombreActual = info.innerHTML.split(": ")[1];
        var actual = videos.indexOf(nombreActual);
        this.src = (actual == videos.length - 1 ? videos[0] : videos[actual + 1]) + ".mp4";
        info.innerHTML = "Vídeo: " + videos[actual + 1];
        this.play();
    }, false);
}
 

[heart_rocker]

Muchas gracias Alexis, funciona perfecto... me has salvado la vida...

[Alexis88]

Una pequeña corrección a la función que genera el bucle:

Código Javascript:

reproductor.addEventListener("ended", function() {
     var nombreActual = info.innerHTML.split(": ")[1];
     var actual = videos.indexOf(nombreActual);
     actual = actual == videos.length - 1 ? 0 : actual + 1;
     this.src = videos[actual] + ".mp4";
     info.innerHTML = "Vídeo: " + videos[actual];
     this.play();
}, false);
 

De ese modo, luego de haberse reproducido el último vídeo, la etiqueta que muestra el nombre, tomará el nombre del primer vídeo, que es el que sigue.

[jodamu]

esta es una forma de hacerlo con datos de una base de datos y por cierto alexis muchas gracias me sirvio mucho tu codigo

<?php include("include/conexion.php");



$tipo=$_GET["tipo"];
$feria=$_GET["feria"];

$sql="SELECT * FROM mostrar WHERE feria=$feria AND tipo=$tipo";
$contenido = mysqli_query($cnx, $sql);
$row_contenido = mysqli_fetch_assoc($contenido);
$videos="";
do {
$videos.= "'".$row_contenido["imagen"]."', ";
} while ($row_contenido = mysqli_fetch_assoc($contenido));

?>
<html>
<head>
<title>Galeria Personalizada</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="slider/galeryEstilos.css">
<script type="text/javascript">
window.onload = function playlist(){
var reproductor = document.getElementById("reproductor"),
videos = [<?php echo $videos ?>],
info = document.getElementById("info");

info.innerHTML = "Video: " + videos[0];
reproductor.src = videos[0];
reproductor.play();

reproductor.addEventListener("ended", function() {
var nombreActual = info.innerHTML.split(": ")[1];
var actual = videos.indexOf(nombreActual);
actual = actual == videos.length - 1 ? 0 : actual + 1;
this.src = videos[actual];
info.innerHTML = "Video: " + videos[actual];
this.play();
}, false);
}
</script>

</head>
<body>

<div id="galeria">

<div id="galeria_principal">
<label style="color:#FFF;" id="info"></label>
<video id="reproductor" autoplay='autoplay' controls='controls' width='100%'>

</video>
</div>


</div>

</body>
</html>