视频静音和取消静音按钮

Question

我正在尝试向全屏背景视频添加 mute/unmute 按钮。我使用了一篇广泛发布的 javascript，包括在 Whosebug (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'))
});

视频静音和取消静音按钮

Video Mute and unmute button

javascript

video

mute