Jquery select ID para hacer click

HaK3r · 12 Abr 2017

Buenas gente. Estoy haciendo unos botones, para que al pulsar, un video se reproduzca y se ponga en 'fullscreen' automáticamente.
La cuestión del asunto es que tengo 5 vídeos, entonces quiero que al hacer click a cierto botón, uno de estos vídeos le de al play y 'fullscreen'.
Ahora lo tengo, pero me lo hace a todos los vídeos que tengo en la pagina, aquí os dejo el código:

Insertar CODE, HTML o PHP:

$('.enter-fullscreen').click(function(e) {
  e.preventDefault();
  $('.vjs-play-control').click();
  $('.vjs-fullscreen-control').click();
});

Estoy trabajando con videojs, que es lo que me permite hacer e fullscreen.

Gracias 🙂 !

JDMoreno · 12 Abr 2017

Muy buenas, ahora mismo es normal que te haga lo mismo a los 5 vídeos, deberías incluir un Id diferente para cada vídeo y cambiar los selectores del código jQuery para que realice la función en base al #id no a las clases genericas.

Un saludo.

goldfish · 12 Abr 2017

ponle un id a cada video y luego lo tomas para el fullscreen desde jquery, y si deseas que sea random, metes los id en un array y usas random() para obtener el id y reproducir

trex15 · 12 Abr 2017

Me parece que debes usar la palabra clave $(this) y navegar por el DOM para que solo se active el '.vjs-play-control' y el '.vjs-fullscreen-control' que correpondan, si me mostraras un poco más la estructura del html talvez de pueda dar una ayuda más especifica. :encouragement:

HaK3r · 18 Abr 2017

Ya tengo una ID para cada video. Lo que no se es como hacer que al dar clic al botón, actué sobre el video con ID X.

- - - Actualizado - - -

trex15 dijo:
Me parece que debes usar la palabra clave $(this) y navegar por el DOM para que solo se active el '.vjs-play-control' y el '.vjs-fullscreen-control' que correpondan, si me mostraras un poco más la estructura del html talvez de pueda dar una ayuda más especifica. :encouragement:

Aquí te muestro un ejemplo de video con el grupo de botones que tengo:

HTML:

 <div class="col-md-12">
      <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default enter-fullscreen">Video1</button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default">Video2</button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default">Video3</button>
        </div>
      </div> 
    </div>
    <div class="col-md-4  video">
      <video id="my-video1" class="video-js img-rounded prova" controls preload="auto"  width="400" height="250" poster="assets/img/bici/bici1.png" data-setup="{}">
        <source src="assets\videos\bici\bicitram1.mp4" type='video/mp4'>
          <p class="vjs-no-js">
              To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
          </p>
      </video>
    </div>

YeltsinReyes · 18 Abr 2017

[MENTION=133641]HaK3r[/MENTION] Seria ponerle a cada boton un id o class unica por ejemplo btn-video1 y por igual al video!

Insertar CODE, HTML o PHP:

$('.btn-video1').click(function(e) {
	e.preventDefault();
	$('#my-video1 .vjs-play-control').click();
	$('#my-video1 .vjs-fullscreen-control').click();
});

HaK3r · 18 Abr 2017

YeltsinGraphs dijo:
[MENTION=133641]HaK3r[/MENTION] Seria ponerle a cada boton un id o class unica por ejemplo btn-video1 y por igual al video!

Insertar CODE, HTML o PHP:

$('.btn-video1').click(function(e) { e.preventDefault(); $('#my-video1 .vjs-play-control').click(); $('#my-video1 .vjs-fullscreen-control').click(); });

Perfecto, me funciona. No tenia conocimientos de que se podía poner más de una variable entre los paréntesis.

Muchas gracias por la ayuda.

YeltsinReyes · 18 Abr 2017

[MENTION=133641]HaK3r[/MENTION] Si se pueden usar muchas y tambien selecionar muchas usando una coma! :encouragement:

Ejemplo

HTML:

<div class="btn btn-primary btn1">Boton 1</div>
<div class="btn btn-primary btn2">Boton 2</div>

Insertar CODE, HTML o PHP:

$('.btn1, .btn2').click(function(e){
	alert('Click al '+$(this).text());
});

Backlink · 26 Abr 2017

trex15 dijo:
Me parece que debes usar la palabra clave $(this) y navegar por el DOM para que solo se active el '.vjs-play-control' y el '.vjs-fullscreen-control' que correpondan, si me mostraras un poco más la estructura del html talvez de pueda dar una ayuda más especifica. :encouragement:

Es lo que me faltaba :sorrow:

Jquery select ID para hacer click

HaK3r

JDMoreno

goldfish

trex15

HaK3r

YeltsinReyes

HaK3r

YeltsinReyes

Backlink

Temas similares