押されたときにビデオのサウンドを切り替えるボタンを追加するにはどうすればよいですか？

Question

クリックしたときに動画をミュートし、もう一度ボタンを押すと音を切り替えるボタンが必要です。これまでのところ、実際の動画をクリックすると動画をミュート/ミュート解除することができました。

Javascript beginner here。

HTML

<div> 
     <div class="play-video"> 
      <img src="../images/icon.svg" class="volume-icon"/> 
      <p class="button"> Play with sound </p> 
     </div> 

     <div id="player"> 
     <video autoplay loop=""> <source src="../images/video-test.mp4" type="video/mp4"> </video> 
     </div> 

    </div> 

Javascriptを

$(document).ready(function(){ 

    $("video").prop('muted', true); 

    $("video").click(function(){ 
    $(this).prop('muted', !$(this).prop('muted')); 
}); 
}); 

ありがとうございます！

あなただけ（映像をクリックする）最初の実装後にこの行を追加する必要があり

Answer 1

：

$(".play-video").click(function(){ 
    $("video").prop('muted', !$("video").prop('muted')); 
}); 

だから、最終的にあなたのjsのコードは次のようになります。

$(document).ready(function(){ 

    $("video").prop('muted', true); 

    $("video").click(function(){ 
     $(this).prop('muted', !$(this).prop('muted')); 
    }); 

    $(".play-video").click(function(){ 
     $("video").prop('muted', !$("video").prop('muted')); 
    }); 
}); 

PSあなたのビデオオブジェクトにいくつかのクラスを与えてそれらを区別することを強くお勧めします。それ以外の場合は、複数のビデオオブジェクトがある場合は、この実装はページ内のすべてのビデオオブジェクトを「ミュート解除」します。

Answer 2

<button id="playPauseBtn"> Play/Pause</button> 

document.getElementById("playPauseBtn"). addEventListener("click", function(){ $('video').prop('muted', !$('video').prop('muted'));});