如何添加按钮来切换视频按下时的声音？

问题描述：

我想要一个按钮，在点击时将视频静音，如果再次按下该按钮，则切换声音。到目前为止，当点击实际视频时，我设法将视频静音/取消静音。如何添加按钮来切换视频按下时的声音？

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

谢谢！

添加一个新按钮并为其编写点击事件处理程序，并执行与您在视频点击中所做的相同的操作。 –

使用切换键切换它们。 – 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 ：我强烈建议你给视频对象提供一些类来区分它们。否则，如果您有多个视频对象，此实现将“取消静音”页面中的所有视频对象。

答

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

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

如何添加按钮来切换视频按下时的声音？

相关推荐