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

Question

我正在处理一些在行上使用 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>

Answer 1

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

• 带有 Youtube 嵌入链接的视频无法正常播放。
• 使用同一 URL 时视频停止自动播放。

第一个可以通过仅使用不嵌入的 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 上。

希望对您有所帮助!