视频静音和取消静音按钮

Question

我正在尝试将静音/取消静音按钮添加到全屏背景视频中。我使用了一段广泛发布的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'))

});

Answer 1

也许您需要等待视频准备就绪才能访问其属性。尝试使用 oncanplay 事件：$("video").oncanplay = function() {&nbsp; &nbsp; $("video").prop('muted', true);};$(".mute-video").click(function () {&nbsp; &nbsp; if ($("video").prop('muted')) {&nbsp; &nbsp; &nbsp; &nbsp; $("video").prop('muted', false);&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('unmute-video'); // changing icon for button&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("video").prop('muted', true);&nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('unmute-video'); // changing icon for button&nbsp; &nbsp; }&nbsp; &nbsp; console.log($("video").prop('muted'))});