トグル再生/一時停止画像ボタン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を自由に編集してください。正解が受け入れられます。

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

が

Answer 2

fiddleを更新してもキランGopalの答えは正しいです。 私は少し編集したコードを提供したいと思っていて、それは魅力的なように働いています。 ボタン画像をCSSの代わりにjavascriptで定義しました。

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