Toggle Play/Pause image buttons HTML5 Video

html, javascript, video

Solution

JS Codes

var playPause = document.getElementById("play-pause");

playPause.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playPause.classList.toggle('pause');
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
   playPause.classList.toggle('pause');
  }
});

css

button{
    height:50px;
  width:50px;  
  border:none;
  outline:none;
}

button.play{
  background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png");
  background-size:100%;
}
button.pause{
  background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png");
  background-size:100%;
}

Here is updated fiddle

Problem

I have this code ``` var video = document.getElementById('player'); video.volume = 0; var muteBtn = document.getElementById('mute'); muteBtn.addEventListener('click',function(){ if(video.volume == 1){ video.volume = 0; muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png"; } else{ video.volume = 1; muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png"; } }); ``` ``` .buttons{ display:block; width:50px; height:50px; background-color:black; float:left; } #control{ width:1000px; height:50px; clear:both; background-color:black; } ``` ``` <div id="control"> <img class="buttons"src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png" onClick="document.getElementById('player').play();"/> <img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" onClick="document.getElementById('player').pause();"/> <img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png" id="mute"> </div> ``` And I wish to make Play/Pause button toggle like mute button currently does. https://jsfiddle.net/t6t0maw7/ I tried duplicating javascript and editing it with play/pause functions but with no luck. Be free to edit jsfiddle.net and correct answer will be accepted.

Original source