$(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.