Change Data-Click attribute on second click-CodePudding

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  data-click="0">Should Play the video</div><br><br><br><br>
      <div  data-click="1">Should only stop the video</div><br><br><br><br>

CodePudding user response：

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  data-click="0">Should Play the video</div><br><br><br><br>
<div >Should only stop the video</div><br><br><br><br>

CodePudding user response：

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 >Should Play the video</div><br><br><br><br>

CodePudding user response：

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"  data-state="0">Play</button>
<button type="button"  data-state="1">Pause</button>