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

Answer 2

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

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

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

2 个答案: