0

Agradezco su ayuda como verán se supone que todo esta "correcto" pero no logro dar con el error de porque no reproduce el video con los controles que le he proporcionado.

por alguna extraña razón o algo de lo que no me he percatado no está funcionando.

No se si tengo mal el $(this).parent().parent()... Recien estoy viendo como funciona, soy nuevo en esto de javascript con html y css, agradezco su ayuda.

Como verán se supone que todo esta "correcto" pero no logro dar con el error de porque no reproduce el video con los controles que le he proporcionado

$(document).on("ready", function(){
	//EVENTOS
	
	//EVENTOS DEL VIDEO PLAY
	$("video").on("play", function(){
		$(this).parent().children("controles").children("btnPlay").hide();
		$(this).parent().children("controles").children("btnPause").show();
	});

	//EVENTOS DEL VIDEO PAUSE
	$("video").on("pause", function(){
		$(this).parent().children("controles").children("btnPlay").show();
		$(this).parent().children("controles").children("btnPause").hide();
	});
			
		//EVENTOS DEL BOTON PLAY
		$(".btnPlay, .btnPause").on("click", function(){
		var parent  = $(this).parent().parent();
		if($(this).hasClass("play")){
			playPauseVideo(parent, "play");
		}else{
			playPauseVideo(parent, "pause")
		}
	});

	function playPauseVideo(parent, type) {
		if(type == "play"){
			$(parent).children("video").get(0).play();
		}else{
			$(parent).children("video").get(0).pause();
		}
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mark-video">
  <div class="video">
    <video src= "http://techslides.com/demos/sample-videos/small.mp4"></video>
    <div class="controles">
      <div>
        <div class="reproduction-body">
          <div class="reproduction-played"></div>
          <div class="circle-indicator"></div>
        </div>
      </div>
      <div class="btnPlay">
        <i class="fas fa-play"></i>
      </div>
      <div class="btnPause">
        <i class="fas fa-pause"></i>
      </div>
    </div>	
  </div>
</div>

2
  • Te falta codigo html amigo, omitiste los elementos con la clase play y pause (fa-play y fa-pause no son los mismos), estos elementos .play y .pause son los que desencadenan en tu codigo original los metodos play y pause de tu elemento video, seguro los tienes agregados en tu codigo original??, considera editar el codigo de la pregunta y ponerlos en el snippet.
    – Layer
    Commented el 12 may. 2020 a las 23:38
  • ya lo corregí, los elementos con la clase play y pause mencionado eran "btnPlay y btnPause" demas no tengo mas codigo. Commented el 13 may. 2020 a las 1:01

1 respuesta 1

1

$(document).ready(function(){

  //EVENTOS
  
  //EVENTOS DEL VIDEO PLAY
  $("video").on("play", function(){
    $($(this).parent().children()[1].children[1]).hide();
    $($(this).parent().children()[1].children[2]).show();
  });
  
  //EVENTOS DEL VIDEO PAUSE
  $("video").on("pause", function(){
    $($(this).parent().children()[1].children[1]).show();
    $($(this).parent().children()[1].children[2]).hide();
  });

  //EVENTOS DEL BOTON PLAY
  $(".btnPlay, .btnPause").on("click", function(){
    var parent  = $(this).parent().parent()[0].firstElementChild;
    if($(this).hasClass("btnPlay")){
      playPauseVideo(parent, "play");
    }else{
      playPauseVideo(parent, "pause")
    }
  });

  function playPauseVideo(parent, type) {
    if(type == "play"){
      parent.play();
    }else{
      parent.pause();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mark-video">
  <div class="video">
    <video src= "http://techslides.com/demos/sample-videos/small.mp4"></video>
    <div class="controles">
      <div>
        <div class="reproduction-body">
          <div class="reproduction-played"></div>
          <div class="circle-indicator"></div>
        </div>
      </div>
      <div class="btnPlay">
        <i class="fas fa-play">play</i>
      </div>
      <div class="btnPause">
        <i class="fas fa-pause">pause</i>
      </div>
    </div>	
  </div>
</div>

Ese es tu código corregido, bueno... le agregue un video al src de tu etiqueta video que encontre por ahi...

Cambios hechos:

tu tenias esto:

$(document).on("ready", function(){
   ...
}

yo en el snippet me di cuenta de que nada se ejecutaba, asi que tuve que cambiar eso por esto:

$(document).ready(function(){
  ...
}

Lo cual es esencialmente lo mismo y ambas cosas deberían funcionar, pero por alguna razón no lo hacen con la primera forma en el snippet...

el primer fallo viene aqui:

$("video").on("play", function(){
    $(this).parent().children("controles").children("btnPlay").hide();
    $(this).parent().children("controles").children("btnPause").show();
});

Donde enrealidad no estabas accediendo a un elemento existente en tu html realmente, asi que fue corregido a:

$("video").on("play", function(){
  $($(this).parent().children()[1].children[1]).hide();
  $($(this).parent().children()[1].children[2]).show();
});

Notese que hay 2 ($), puesto que el primero encierra al elemento del segundo, lo que pasa es que estamos wrappeando un elemento html, a codigo de jQuery, para que se puedan usar las funciones hide() y show de jQuery, el codigo de arriba accedera primero a tu elemento video:

$(this)

Luego a su padre:

<div class="video"></div>

Luego a su segundo hijo:

<div class="controles">
</div>

Y luego al segundo hijo:

<div class="btnPlay">
</div>

Esto mismo para la linea:

$($(this).parent().children()[1].children[2])

Solo que en esa linea en vez de acceder a:

<div class="btnPlay">
</div>

Accedemos a:

<div class="btnPause">
</div>

El cual es el tercer hijo, con eso deberán ocultarse y mostrarse correctamente esos elementos.

en la segunda parte que tenias:

$("video").on("pause", function(){
    $(this).parent().children("controles").children("btnPlay").show();
    $(this).parent().children("controles").children("btnPause").hide();
});

Hice exactamente lo mismo que hice con el anterior codigo, solo que alrevez, es decir, ahora en vez de esconder el boton de play, se muestra el boton de play y viceversa.

$("video").on("pause", function(){
  $($(this).parent().children()[1].children[1]).show();
  $($(this).parent().children()[1].children[2]).hide();
});

Ahora, en tus eventos click tuve que hacer un pequeño cambio tambien, a fin de obtener de manera correcta tu elemento video, por ejemplo, tu tenias esto:

var parent  = $(this).parent().parent();

solo te faltaba acceder a su hijo para obtener como tal el elemento video:

var parent  = $(this).parent().parent()[0].firstElementChild;

Ademas, dentro del if que tenias, tenias la siguiente condicion:

if($(this).hasClass("play")){
   ...
}else{
  ...
}

Esto es incorrecto, puesto que en la edicion del codigo, no tienes ningun elemento con una clase llamada play ni tampoco una llamada pause, asi que pasamos de eso a esto:

if($(this).hasClass("btnPlay")){
  playPauseVideo(parent, "play");
}else{
  playPauseVideo(parent, "pause")
}

donde la clase btnPlay si existe.

Lo demas de tu codigo era correcto y no se tuvo que modificar.

Tambien agregue en tus etiquetas i un pequeño contenido para hacer que tus botones se mostrasen...

<i class="fas fa-play">play</i>
<i class="fas fa-pause">pause</i>

Puesto que si no ponía contenido tus botones no se iban a mostrar... en tu código no es necesario ponerles contenido, porque seguro tienes css que controla este comportamiento en tu codigo original.

Entonces el resultado es cuando tu le des click a play o a pause, tu código sera ejecutado correctamente.

2
  • Porfavor ver el snippet en la ventana expandida, puesto que solo se mueve la parte superior del video y esto puede generar confusión si se ve desde el snippet con tamaño normal...
    – Layer
    Commented el 13 may. 2020 a las 1:54
  • 1
    muchas gracias, me funcionó a la perfección... Debo tener cuidado con el uso de los $(this) y los parent() Commented el 13 may. 2020 a las 2:02

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.