视频静音和取消静音按钮

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() {

    $("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'))

});