Uso la etiqueta <video>
para poder reproducir una lista de vídeos en mi pagina web, para lograr esto se me ocurrió cargar la lista de videos usando <source>
dentro de <video>
después usar el evento ended
combinado con el atributo loop
para que al terminar de reproducirse el primer vídeo usar JavaScrip
y remover el primer <source>
y como cuenta con el atributo loop
reproducir automáticamente el <source>
que en este caso sería el segundo de la lista ya que el primero fue eliminado al terminar de reproducirse y repetir este proceso hasta que se terminen todas las etiquetas source
, por el momento cuento con esto:
<video autoplay preload="auto" muted controls loop id="vid" width="100%">
<source src="videos/video1.mp4" type="video/mp4" />
<source src="videos/video2.mp4" type="video/mp4" />
<source src="videos/video3.mp4" type="video/mp4" />
</video>
var reprod = document.getElementById("vid");
reprod.onended = function() {
//Aquí deseo borrar el primer elemento source dentro del elemento video
};
Mi consulta es ¿cómo puedo remover la primer etiqueta <source>
de la lista usando JavaScript
o JQuery
? y si mi idea general para lograr esto es correcta.
AGREGADO: Para tratar de eliminar el primer source traté algo como esto
var reprod = document.getElementById("vid");
var srcs = reprod.getElementByTagName("source");
reprod.onended = function() {
reprod.removeChild(srcs[0]);
};