0

我在这个网站上使用了一个视频背景插件http://kimcolemanprojects.com/index.html

它在所有浏览器上都很好用，只有在用户点击屏幕之前视频不会显示，这只是一个白屏。

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

谢谢你的帮助。

安吉拉

4

1 回答 1

0

这确实是一件奇怪的事。只有当我在后台选项卡中打开您的网站时才会发生这种情况。绝对没有点击处理程序。（请参阅开发工具中的“事件侦听器断点”。）并且视频元素确实存在并已加载，即使它没有显示。所以我怀疑这要么是 Chrome 中的错误，要么是它处理某些缓慢加载页面的方式的怪癖。

似乎使它出现的一件事是在开发人员工具中调整 CSS。因此，请尝试在 body 元素的末尾将其添加到您的页面中：

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

当我在控制台中运行它时，这对我有用，所以希望它可以在脚本中运行。

此外，您可以做一些简单的事情来使页面加载速度更快并缓解这个特定问题，即使您不能让它完全消失。

  1. 设置深色背景颜色。这样，当视频需要一些时间加载时，人们将能够立即看到白色文字。

  2. 使视频更小。它大约 21MB，对于背景来说太大了。它以大约每秒 3400kb 的速度进行编码，这甚至超出了您对网络上高清视频的需要。尝试 1000kb 甚至更少。也许500kb。并且不要在视频文件中包含音轨。

  3. 将海报图像保存为 jpg 而不是 png。它是 140kb。你可以让它更小。

  4. 将所有脚本（移动重定向除外）放在正文标记的底部。这样，您至少可以在无需加载脚本的情况下显示文本和背景颜色。

于 2013-03-21T14:54:24.200 回答