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



我一直在尝试为我正在使用Elegant Themes DIVI主题的网站上的横幅视频添加静音/取消静音切换。我让它在没有静音的情况下播放,但它只运行了前几次,然后根本无法播放视频。我想这是因为谷歌在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. 使用窗口加载而不是文档就绪
  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();
});
});

最新更新