javascript - HTML & JavaScript - 静音按钮没有任何作用

Question

我为全屏自动播放视频添加了一个切换静音按钮，但不幸的是它不起作用。

如果我点击按钮，什么都不会发生。我在控制台中没有错误。

我该如何解决？我的<video>旗帜：

preload="auto" autoplay="autoplay" loop="true" muted="" playsinline="" style="position: absolute;"

我试过了：

$(".bg-video-button-muted").click(function(){
    if ($(this).prev().find("#video_background").prop('muted')) {
        $(this).prev().find("#video_background").prop('muted', false);
        $(this).find("i").removeClass("fa-volume-off").addClass("fa-volume-up");
    }
    else {
        $(this).prev().find("#video_background").prop('muted', true);
        $(this).find("i").removeClass("fa-volume-up").addClass("fa-volume-off");
    }
    
    return false;
});

这就是我网站上按钮的代码：

<a href="#" role="button" class="bg-video-button-muted"><i class="fa fa-volume-off"></i></a>

如果您需要我的网站文件中的任何按钮，请随时添加评论。

标签： javascripthtmlcss

Answer 1

您的代码应该可以正常工作，我在下面添加了一个示例并且它可以工作。

我认为您的代码的问题是以下问题之一。

1-您没有找到带有闲置代码的当前元素

$(this).prev().find

2-您在渲染器完成之前绑定点击事件，然后您可以$(document).ready在站点底部添加或添加脚本。

$(document).ready(function(){
$(".bg-video-button-muted").click(function(){
    if ($("#video_background").prop('muted')) {
        $("#video_background").prop('muted', false);
       // $(this).find("i").removeClass("fa-volume-off").addClass("fa-volume-up");
        console.log("unmute")
    }
    else {
        $("#video_background").prop('muted', true);
       // $(this).find("i").removeClass("fa-volume-up").addClass("fa-volume-off");
         console.log("mute")
    }
    
    return false;
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" role="button" class="bg-video-button-muted">mute</a>


<video id="video_background" width="400" controls>
  <source src="https://www.quackit.com/video/pass-countdown.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>