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

Question

我想要一个按钮，它可以在单击时使视频静音，并在再次按下该按钮时切换声音。到目前为止，当实际视频被点击时，我设法 mute/unmute 了视频。

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

谢谢！

Answer 1

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

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

Answer 2

您只需在第一次实施后添加此行（点击视频）：

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

P.S.: 我强烈建议你给你的视频对象一些类来区分它们。否则，此实施将 "unmute" 您页面中的所有视频对象（如果您有多个视频对象）。

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

How to add a button that toggles sound of a video when pressed?

html

javascript

mute

togglebutton

html5-video