在视频背景上添加静音/取消静音按钮 [DIVI 主题 - WordPress]答案

【问题标题】：Adding Mute/Unmute Button on a Video Background [DIVI Theme - WordPress]在视频背景上添加静音/取消静音按钮 [DIVI 主题 - WordPress]
【发布时间】：2018-11-07 22:14:12
【问题描述】：

我一直在尝试为我正在开发的网站上的横幅视频添加静音/取消静音切换，该网站使用优雅主题的 DIVI 主题。我让它在没有静音的情况下播放，但它只工作了前几次，然后它根本不会播放视频。我认为这是因为 Google 在 Chrome 中的自动播放政策？

无论如何，我已经尝试使用下面的代码来创建静音/取消静音按钮，但它似乎不起作用，尽管它适用于我尝试过的其他 sn-ps。

有问题的页面是： http://www.snapperbonanza.co.nz/home-2/

代码是：

jQuery(document).ready(function(){
    jQuery(".et_pb_section_video_bg video").prop('muted', true);

    jQuery("#mute-video").click( function (){
        if( jQuery(".et_pb_section_video_bg video").prop('muted') ) {
            jQuery(".et_pb_section_video_bg video").prop('muted', false);
        } else {
            jQuery(".et_pb_section_video_bg video").prop('muted', true);
        }
    });
});

任何帮助将不胜感激:)

【问题讨论】：

这是一个 js 错误 - joxi.ru/xAegZJwCp8WWqm 删除这个给出错误的代码并查看结果
感谢您的帮助，但遗憾的是按钮仍然无法使用

标签： javascript jquery wordpress video

【解决方案1】：

两个问题：

使用窗口加载而不是文档就绪。
我需要将音量设置为 1。它仍然无法取消静音，因为音量也设置为 0。

在这段代码中，我还有一个很棒的字体图标，用于切换静音/取消静音：

jQuery(window).load(function() {
    jQuery("video").prop('volume', 1);
    jQuery("#mute-video").click(function () {
        jQuery("video").prop("muted", !jQuery("video").prop("muted"));
        jQuery("#mute-video .fa-volume-mute").toggle();
        jQuery("#mute-video .fa-volume-up").toggle();
    });
});

【讨论】：