切换播放/暂停图像按钮HTML5视频

Question

我有这段代码。

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>

我希望能够使播放/暂停按钮像静音按钮一样切换。 https://jsfiddle.net/t6t0maw7/ 我尝试复制JavaScript并编辑它以添加播放/暂停功能，但没有成功。 你可以自由地编辑jsfiddle.net，正确的答案将被接受。

- Darktwen

Answer 1

JS 代码

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%;
}

这里是更新的代码示例

- kiran Gopal

Answer 2

甚至 Kiran Gopal 的回答是正确的。我想提供一些我稍微编辑过的代码，现在它已经可以完美地工作了。 我在 JavaScript 中定义了按钮图像，而不是在 CSS 中。

    <video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="true" loop="true" width="100%" height="auto" id="plejer"></video>

<div id="control">
 <img src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" id="play-pause" class="play"></img>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png" id="mute">
</div>

<script>
var video = document.getElementById('plejer');
    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-off-beli-1.png";
    }
    else{
        video.volume = 1;
     muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
    }
});

var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();
    playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png";
    // Update the button text to 'Pause'
    playPause.classList.toggle('pause');
  } else {
    // Pause the video
    video.pause();
    playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png";
    // Update the button text to 'Play'
   playPause.classList.toggle('pause');
  }
});

</script>
<style>
.buttons{
display:block;
width:25.6px;
height:25.6px;
float:left;
}
.play{
display:block;
width:25.6px;
height:25.6px;
float:left;
margin-right:5px;
}
#control{
width:1000px;
height:25.6px;
clear:both;
    position:absolute;
    top:88%;
    left:4%;
    z-index:1;
}
@media only screen and (max-width: 500px) {
   #control{
width:1000px;
height:25.6px;
clear:both;
    position:absolute;
    top:73%;
    left:4%;
    z-index:1;
}
</style>

- Darktwen