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

时间:2018-11-07 22:14:12

标签: javascript jquery wordpress video

我一直在尝试将静音/取消静音切换添加到我正在使用的网站上的横幅视频中,该视频使用“典雅主题”的DIVI主题。我可以在没有音频静音的情况下播放它,但是它只能在前几次工作,然后根本无法播放视频。我认为这是由于Google在Chrome浏览器中的自动播放政策引起的吗?

无论如何,我已经尝试过下面的代码来创建“静音/取消静音”按钮,但是它似乎无法正常运行,尽管它可以在我尝试过的其他代码片段上运行。

有问题的页面是: 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);
        }
    });
});

任何帮助将不胜感激:)

1 个答案:

答案 0 :(得分:0)

两个问题:

  1. 使用窗口加载而不是准备文档。
  2. 我需要将音量设置为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();
    });
});