Events 视频背景/Chrome浏览器仅在用户单击屏幕时显示视频?

Events 视频背景/Chrome浏览器仅在用户单击屏幕时显示视频?,events,google-chrome,jquery-plugins,html5-video,Events,Google Chrome,Jquery Plugins,Html5 Video,我正在这个网站上使用一个视频背景插件 它在所有浏览器上都非常有效,只有在chrome浏览器上,只有用户点击屏幕时,视频才会显示,而屏幕只是一个白色的屏幕 看起来它绑定到一个点击事件,但我不知道在哪里。我看不到绑定到此页面的任何事件 谢谢你的帮助 安吉拉这的确是一个奇怪的问题。只有在后台选项卡中打开您的站点时,才会发生这种情况。绝对没有单击处理程序。(请参阅开发工具中的“事件侦听器断点”)并且视频元素确实存在并已加载,即使它没有显示。所以我怀疑这可能是Chrome中的一个bug,也可能是它处理某些

我正在这个网站上使用一个视频背景插件

它在所有浏览器上都非常有效,只有在chrome浏览器上,只有用户点击屏幕时,视频才会显示,而屏幕只是一个白色的屏幕

看起来它绑定到一个点击事件,但我不知道在哪里。我看不到绑定到此页面的任何事件

谢谢你的帮助


安吉拉这的确是一个奇怪的问题。只有在后台选项卡中打开您的站点时,才会发生这种情况。绝对没有单击处理程序。(请参阅开发工具中的“事件侦听器断点”)并且视频元素确实存在并已加载,即使它没有显示。所以我怀疑这可能是Chrome中的一个bug,也可能是它处理某些缓慢加载页面时的一个怪癖

有一件事似乎让它显现出来,那就是在开发人员工具中调整CSS。因此,请尝试在body元素末尾将其添加到页面中:

<script>
  $(document).ready(function() {
    setTimeout(function() {
      document.getElementsByTagName('video')[0].style.display = '';
    }, 500);
  });
</script>

$(文档).ready(函数(){
setTimeout(函数(){
document.getElementsByTagName('video')[0].style.display='';
}, 500);
});
当我在控制台中运行它时,这对我来说是可行的,所以希望它能在脚本中工作

此外,您还可以做一些简单的事情来加快页面加载速度并缓解这个特殊问题,即使您无法完全消除这个问题

  • 设置暗背景色。这样,当视频加载需要一些时间时,人们将能够立即看到白色文本

  • 使视频小得多。它大约21MB,对于背景来说太大了。它的编码速度约为每秒3400kb,这比网络上高清视频所需的速度还要高。在1000kb或更小的空间尝试。可能是500kb。并且不要在视频文件中包含音频曲目

  • 将海报图像另存为jpg而不是png。140kb。你可以把它弄小一点

  • 将所有脚本(移动重定向除外)放在body标记的底部。这样,您至少可以在不加载脚本的情况下显示文本和背景色


  • 谢谢你的回复。添加脚本似乎确实有帮助。即使有轻微的延迟,它现在似乎也不会等待事件发生。我现在将致力于缩小视频的大小,看看这是否有进一步的帮助。再次感谢。