Change Data-Click attribute on second click

user_5769648 0
Viewed 39

I am trying to build a video player that plays the video when the first button is clicked by checking if data-click="0". If yes it sets this to data-click="1". To pause the video I have a second button with the value data-click="1", this pauses the video. But now I have the problem that the first link that plays the video is still set to data-click="1", so I have to click the link twice to play the video. Is it possible to pause the video when clicking the second link and at the same time give the first link 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>

html javascript
3 Answers

Instead of using a data attribute on the button, you could always just use a variable that isn't tied to a button. I also changed it to isPlaying as that seems more semantically correct.

You can also change the text in the button and just use a single button.

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

user_36842650

When you click stop you should reset the play/pause button status back to data-click="0". These should be 2 different buttons

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

user_38073650

Is it possible to pause the video when clicking the second link and at the same time give the first link data-click="0"?

Yes. There are many ways to go about this, but the example below utilises two functions:

  • activatePlay() // Activates Play and deactivates Pause
  • activatePause() // Activates Pause and deactivates Play

Working Example:

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>

user_38977750
Related