如何添加按下时可以切换视频声音的按钮

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