WPBakery 视频背景自动播放不起作用

问题描述

我正在处理一些在行上使用 WPBakery 视频背景的网站。这些应该自动播放，直到最近才这样做。有时他们会，有时他们不会。通常，当我在 Chrome 上通过隐身模式查看它们时，它们无法正常工作时会发生这种情况。我知道几年前自动播放需要包括静音的变化，我试图破解它以将静音添加到允许中，但是因为它是通过 iframe 进来的，它为自动播放添加它为时已晚开始。

示例站点：

https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/

我没有看到其他问题，但我在三个完全不同的网站上看到它的事实意味着这可能是一个更大的问题。

下面是我尝试过的一些代码，但没有成功让它真正自动播放。它给了我 .play() 不是函数的错误。

<script type="text/javascript">
   jQuery(function($) {
      $(window).load(function(){
         $('#widget2').attr('allow','muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
         $('#widget2').play();
      });
   });
</script>

解决方法

我认为 WPBakery 插件的视频背景有两个部分无法正常工作。

• 带有 YouTube 嵌入链接的视频无法正常工作。
• 视频在使用相同网址时停止自动播放。

第一个可以通过只使用 URL 而不嵌入来修复。类似：https://www.youtube.com/watch?v=XXXXXXXXX

第二个可以通过在每次加载页面时创建一个唯一的 URL 来修复。这可以通过以下代码完成：

 function startVideo() {​​​​​​​
    const date = $('.video-wrapper').data('date');
    let src = $('.video-wrapper iframe').attr('src');
    src = src + '&autoplay=1&randomVar=' + date;
    $('.video-wrapper iframe').attr('src',src);
 }​​​​​​​

这将采用 iframe 的现有 url，添加包装器上可用的当前日期并重新生成视频的 url。这样 URL 总是唯一的并且会自动播放。您也可以手动生成日期并将其添加为 URL 上的随机参数。

希望对你有帮助！