Question

我正在尝试向全屏背景视频添加静音/取消静音按钮。我使用了一段JavaScript，该JavaScript已广泛发布，包括关于stackoverflow（HTML Video mute button）。不幸的是，它默认为静音。不管我尝试什么，我都无法默认取消静音。显然我是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'))
});

Answer 1

也许您需要等待视频准备就绪才能访问其属性。尝试使用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'))
});

视频静音和取消静音按钮

1 个答案: