Foros del Web » Programando para Internet » Javascript »

Video js

Estas en el tema de Video js en el foro de Javascript en Foros del Web. Hola compañeros, muchas gracias por leer el post, tengo una duda, como puedo hacer que cuando acabe de reproducir un video pase a reproducir otro ...
  #1 (permalink)  
Antiguo 22/09/2021, 05:06
 
Fecha de Ingreso: noviembre-2012
Mensajes: 72
Antigüedad: 9 años
Puntos: 1
Video js

Hola compañeros, muchas gracias por leer el post, tengo una duda, como puedo hacer que cuando acabe de reproducir un video pase a reproducir otro video que es el principal?

Tengo este código
Código HTML:
<figure id="video_player">


	<video controls autoplay poster="video1.jpg">
		<source src="./videos/principal.mp4" type="video/mp4">
		
	</video>
	<figcaption>
		<a href="./videos/video1.mp4"><img src="video1.jpg" alt="Video 1"></a>
		<a href="./videos/video2.mp4"><img src="video2.jpg" alt="Video 2"></a>
		<a href="./videos/video3.mp4"><img src="video3.jpg" alt="Video 3"></a>
		<a href="./videos/video3.mp4"><img src="vide4.jpg" alt="Video 4"></a>
	</figcaption>
</figure>


<script>
var video_player = document.getElementById("video_player"); 
var links = video_player.getElementsByTagName('a');
var t;
for (var i=0; i<links.length; i++) { 
	links[i].onclick = handler; 
}

function handler(e) { 
	e.preventDefault();
	videotarget = this.getAttribute("href");
	filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
	video = document.querySelector("#video_player video");
	video.removeAttribute("controls");
	video.setAttribute("poster","/assets/images/video-placeholder.png");
	source = document.querySelectorAll("#video_player video source");
	source[0].src = filename + ".mp4";
	source[1].src = filename + ".webm";
	video.load();
	video.play();	
}


</script> 
Muchas gracias
  #2 (permalink)  
Antiguo 22/09/2021, 12:01
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.538
Antigüedad: 10 años
Puntos: 968
Respuesta: Video js

Con el evento ended puedes detectar el fin de la reproducción de un vídeo. Lo único que necesitarías sería tener el vídeo principal almacenado en alguna variable global (porque en la función lo reemplazas por el vídeo seleccionado) y lo restableces como principal al terminar la reproducción de cualquiera de los otros vídeos. Para mayor seguridad, podrías hacer una comparación entre el nombre del vídeo actual y el principal.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 23/09/2021, 09:12
 
Fecha de Ingreso: noviembre-2012
Mensajes: 72
Antigüedad: 9 años
Puntos: 1
Respuesta: Video js

Muchas gracias, me ha funcionado perfectamente.
He incluido esto
Código HTML:
document.getElementById('principal').addEventListener('ended', function(e) {

        document.getElementById("mp4_src").src = "./videos/principal.mp4";
        document.getElementById("principal").load();
    })
Así cuando termina cada video salta al principal.

Saludos
Carlos



La zona horaria es GMT -6. Ahora son las 00:00.