如何添加按鈕來切換視頻按下時的聲音？

我想要一個按鈕，在點擊時將視頻靜音，如果再次按下該按鈕，則切換聲音。到目前爲止，當點擊實際視頻時，我設法將視頻靜音/取消靜音。如何添加按鈕來切換視頻按下時的聲音？

Javascript初學者在這裏。

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

謝謝！

來源

2017-02-24 ancad

添加一個新按鈕併爲其編寫點擊事件處理程序，並執行與您在視頻點擊中所做的相同的操作。 –

使用切換鍵切換它們。 – Nadim

你只需要在第一次執行後，加入這行（點擊視頻）：到底

$(".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 ：我強烈建議你給視頻對象提供一些類來區分它們。否則，如果您有多個視頻對象，此實現將「取消靜音」頁面中的所有視頻對象。

來源

2017-02-24 12:38:30 Riko

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

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

來源

2017-02-24 12:28:38

如何添加按鈕來切換視頻按下時的聲音？

回答

相關問題