3

Tengo una listas de videos en una web que se generan con el siguiente codigo:

if (arch === '.mp4') {
  previo = '<video controls width="70%" preload="metadata" poster="media/imagen/postervideos.png">  <source src="' + ruta + archivo + '" type="video/mp4"></video>';
  boton = "Ver Video en otra ventana" + v;

}

Requiero que cuando se le haga click a un video este se ejecute y cuando se le haga click a otro video entonces el primer video se detenga.

He intentado hacerlo funcionar con el siguiente script pero no logro hacerlo funcionar

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            this.pause();
            this.currentTime = 0;
        }
    });
});
4
  • 1
    Podrías tener una variable global donde guardes ID del video que se está reproduciendo, cuando hagas clic en otro, detienes el video actual, comienzas la reproducción del nuevo y actualizas la variable.
    – Triby
    Commented el 8 sept. 2020 a las 4:04
  • Ok ya he creado los id dentro del bucle de esta forma previo = '<video id="'+narchi+'" controls width="70%" preload="metadata" poster="media/imagen/postervideos.png"> <source src="' + ruta + archivo + '" type="video/mp4"></video>'; ahora como seria la instruccion para que pause el video actual cuando se le da click al play de otro video..? Commented el 8 sept. 2020 a las 12:41
  • Listo lo he hecho funcionar con solo asignarle un id a cada video ya funciona a la perfección..! Commented el 8 sept. 2020 a las 12:57
  • Agrega una respuesta con la solución, seguramente le servirá a alguien más.
    – Triby
    Commented el 8 sept. 2020 a las 15:34

1 respuesta 1

1

He solucionado de la siguiente manera: he creado los id dentro del bucle de esta forma

previo = '<video id="'+narchi+'" controls width="70%" preload="metadata" poster="media/imagen/postervideos.png">  <source src="' + ruta + archivo + '" type="video/mp4"></video>';

y en la misma function de donde se originan la listas de videos he ingresado el siguiente codigo

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            this.pause();
            this.currentTime = 0;
        }
    });
});

de esta manera cuando hay un video en play y hago play a otro video el video que estaba en play se pausa de forma automatica.

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.