Estoy tratando de construir un reproductor de video que reproduzca el video cuando se hace clic en el primer botón al verificar si data-click="0" . En caso afirmativo, establece esto en data-click="1" . Para pausar el video tengo un segundo botón con el valor data-click="1", esto pausa el video. Pero ahora tengo el problema de que el primer enlace que reproduce el video todavía está configurado en data-click="1" , por lo que tengo que hacer clic en el enlace dos veces para reproducir el video. ¿Es posible pausar el video al hacer clic en el segundo enlace y al mismo tiempo darle al primer enlace data-click="0" ?
$(document).ready(function(){ $('.play-pause-btn').on('click',function(){ if($(this).attr('data-click') == 1) { $(this).attr('data-click', 0) $('#video')[0].pause(); } else { $(this).attr('data-click', 1) $('#video')[0].play(); } }); }); body { background-color: #333; } .play-pause-btn { display: block; background-color: #111; width: 200px; margin: 0 auto; text-align: center; padding: 5px 0; font-family: arial; cursor: pointer; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div style="text-align:center"> <video id="video" width="720"> <source preload="auto" autoplay playsinline controls="controls" src="https://cdn.cuberto.com/cb/video/showreel/1.mp4" type="video/mp4"> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/example-webm.webm" type="video/webm"> </video> </div> <div class="play-pause-btn" data-click="0">Should Play the video</div><br><br><br><br> <div class="play-pause-btn" data-click="1">Should only stop the video</div><br><br><br><br>En lugar de usar un atributo de datos en el botón, siempre puede usar una variable que no esté vinculada a un botón. También lo cambié a isPlaying porque parece más semánticamente correcto.
También puede cambiar el texto en el botón y simplemente usar un solo botón.
$(document).ready(function() { let isPlaying = 0; $('.play-pause-btn').on('click', function() { if (isPlaying == 1) { isPlaying = 0; $('#video')[0].pause(); $(this).html("Should Play the video"); } else { isPlaying = 1; $('#video')[0].play(); $(this).html("Should Pause the video"); } }); }); body { background-color: #333; } .play-pause-btn { display: block; background-color: #111; width: 200px; margin: 0 auto; text-align: center; padding: 5px 0; font-family: arial; cursor: pointer; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div style="text-align:center"> <video data-playing="0" id="video" width="720"> <source preload="auto" autoplay playsinline controls="controls" src="https://cdn.cuberto.com/cb/video/showreel/1.mp4" type="video/mp4"> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/example-webm.webm" type="video/webm"> </video> </div> <div class="play-pause-btn">Should Play the video</div><br><br><br><br>Cuando haga clic en detener , debe restablecer el estado del botón de reproducción/pausa a data-click="0" . Estos deben ser 2 botones diferentes
$(document).ready(function() { $('.play-pause-btn').on('click', function() { if ($(this).attr('data-click') == 1) { $(this).attr('data-click', 0) $('#video')[0].pause(); } else { $(this).attr('data-click', 1) $('#video')[0].play(); } }); $('.stop-btn').on('click', function() { $('#video')[0].pause(); $('#video')[0].currentTime = 0; $('.play-pause-btn').attr('data-click', 0) }); }); body { background-color: #333; } .play-pause-btn, .stop-btn { display: block; background-color: #111; width: 60px; margin: 0 auto; text-align: center; padding: 5px 0; font-family: arial; cursor: pointer; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div style="text-align:center"> <video id="video" width="720"> <source preload="auto" autoplay playsinline controls="controls" src="https://cdn.cuberto.com/cb/video/showreel/1.mp4" type="video/mp4"> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/example-webm.webm" type="video/webm"> </video> </div> <div class="play-pause-btn" data-click="0">Should Play the video</div><br><br><br><br> <div class="stop-btn">Should only stop the video</div><br><br><br><br>¿Es posible pausar el video al hacer clic en el segundo enlace y al mismo tiempo darle al primer enlace data-click="0"?
Sí. Hay muchas maneras de hacer esto, pero el siguiente ejemplo utiliza dos funciones:
activatePlay() // Activa Reproducir y desactiva PausaactivatePause() // Activa Pausa y desactiva ReproducirEjemplo de trabajo:
let playPauseButtons = document.getElementsByClassName('play-pause-btn'); let playButton = playPauseButtons[0]; let pauseButton = playPauseButtons[1]; const activatePlay = () => { playButton.dataset.state = 1; pauseButton.dataset.state = 0; } const activatePause = () => { pauseButton.dataset.state = 1; playButton.dataset.state = 0; } playButton.addEventListener('click', activatePlay, false); pauseButton.addEventListener('click', activatePause, false); .play-pause-btn { width: 100px; height: 100px; font-size: 24px; border: 2px solid rgb(191, 191, 191); border-radius: 50%; cursor: pointer; } .play-pause-btn[data-state="0"] { color: rgba(127, 127, 127, 0.3); } .play-pause-btn[data-state="1"] { color: rgba(127, 127, 127, 1); } <button type="button" class="play-pause-btn" data-state="0">Play</button> <button type="button" class="play-pause-btn" data-state="1">Pause</button>