3

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

示例站点：

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

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

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

<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>
4

1 回答 1

0

我认为 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 上的随机参数。

希望这有帮助！

于 2021-05-18T08:20:45.297 回答