Кнопка отключения и включения звука видео

Я пытаюсь добавить кнопку отключения/включения звука в полноэкранное фоновое видео. Я использовал фрагмент javascript, который широко публикуется, в том числе в stackoverflow (HTML-кнопка отключения видео). К сожалению, по умолчанию это отключено. Что бы я ни пытался, я не могу включить звук по умолчанию. Очевидно, я новичок в js.

<video class="video" autoplay loop>
    <source src="video.mp4" type="video/mp4">
</video>
<button class="mute-video unmute-video"></button>

$("video").prop('muted', true);

$(".mute-video").click(function () {
    if ($("video").prop('muted')) {
        $("video").prop('muted', false);
        $(this).addClass('unmute-video'); // changing icon for button

    } else {
        $("video").prop('muted', true);
        $(this).removeClass('unmute-video'); // changing icon for button
    }
    console.log($("video").prop('muted'))
});

javascript mute video
person Gareth Roberts AnchorPrint    schedule 14.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вам нужно дождаться готовности видео, чтобы получить доступ к его свойствам. Попробуйте использовать событие oncanplay:

$("video").oncanplay = function() {
    $("video").prop('muted', true);
};

$(".mute-video").click(function () {
    if ($("video").prop('muted')) {
        $("video").prop('muted', false);
        $(this).addClass('unmute-video'); // changing icon for button

    } else {
        $("video").prop('muted', true);
        $(this).removeClass('unmute-video'); // changing icon for button
    }
    console.log($("video").prop('muted'))
});
person Roberto C. Rodriguez-Hidalgo    schedule 18.05.2020
comment
Работает отлично. Как раз то, что мне было нужно. Ты звезда. - person Gareth Roberts AnchorPrint; 18.05.2020