Как добавить кнопку, которая переключает звук видео при нажатии?

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

PS: я настоятельно рекомендую вам дать несколько классов для ваших видео объектов, чтобы различать их. В противном случае эта реализация "включит" все видеообъекты на вашей странице, если у вас их более одного.

Answer 2

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

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