1

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]);
};
1
  • Agrega una breve descripción de lo que has buscado/investigado como se sugiere en Cómo preguntar.
    – Rubén
    Commented el 3 mar. 2020 a las 0:51

2 respuestas 2

2

Uno de los problemas es loop, cuando este control está presente no se ejecuta el evento ended (al menos en algunos navegadores). Otro problema es que cuando haces reprod.getElementByTagName("source") estando fuera de la función siempre vas a tratar de eliminar el mismo elemento, aunque ya no exista. Una posible solución sería algo como:

const reprod = document.getElementById("vid");

reprod.addEventListener('ended',function(){
       const sources = document.getElementsByTagName("source"); 
       this.removeChild(sources[0]);//<-- Es el primer elemento en cada loop
       this.play();//<-- Para reemplazar loop
})
2

En general <source> es usado para disponer al usuario distintos formatos de audio/video, lo cual no parece que estés haciendo en tu código.

Creo que una forma distinta sería que controlaras el src de tu video en el evento ended. Aquí un ejemplo de como cambiarlo cuando termina de reproducirse el primer video:

const video = document.querySelector('video');

video.addEventListener('ended', (event) => {
  console.log('video actual', event.target.src);
  if( event.target.src != 'https://mdn.github.io/dom-examples/canvas/chroma-keying/media/video.mp4'){
    event.target.src = 'https://mdn.github.io/dom-examples/canvas/chroma-keying/media/video.mp4'
  }
      
});
<video src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" autoplay width="250" muted>
</video>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.