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 Javascript
:
Ver originalwindow.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