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

Question

我想要一个按钮，在单击时将视频静音，并在再次按下按钮时切换声音。到目前为止，我设法在单击实际视频时将视频静音/取消静音。

这里是 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

您只需在第一次实现后添加此行(单击视频):

$(".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.:我强烈建议您为视频对象指定一些类以区分它们。否则，如果您有多个视频对象，此实现将“取消静音”页面中的所有视频对象。