눌렀을 때 비디오의 사운드를 토글하는 버튼을 추가하는 방법은 무엇입니까?

Question

클릭하면 동영상을 음소거하고 버튼을 다시 누르면 소리가 전환되는 버튼이 필요합니다. 지금까지 나는 실제 비디오를 클릭 할 때 비디오를 음소거/음소거 해제 할 수있었습니다.

자바 스크립트 초보자는 여기에서.

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> 

자바 스크립트

$(document).ready(function(){ 

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

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

감사합니다!

Answer 1

당신은 단지 첫 번째 구현 한 후이 줄을 추가 (클릭 비디오)가 필요합니다

: 당신의 JS 코드는 다음과 같이 될 것입니다 그래서

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

결국을 :

$(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'));});