Question

我在此网站http://kimcolemanprojects.com/index.html

上使用视频背景插件

它适用于所有浏览器，只有在Chrome上，视频才会显示，直到用户点击屏幕，这只是一个白色屏幕。

看起来它绑定了一个点击事件，但我找不到哪里。我看不到绑定到此页面的任何事件。

感谢您的帮助。

安吉拉

Answer 1

这确实很奇怪。当我在后台标签中打开您的网站时，它才会发生。肯定没有点击处理程序。（请参阅开发工具中的“事件侦听器断点”。）视频元素确实存在并加载，即使它没有显示。所以我怀疑这可能是Chrome中的一个错误，也可能是处理某些缓慢加载页面的怪癖。

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

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

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

此外，您可以采取一些简单的方法来加快页面加载速度，并缓解此特定问题，即使您无法完全消失。

设置深色背景色。这样，当视频需要一些时间加载时，人们就可以立即看到白色文本。
将视频缩小。它大约是21MB，对于背景而言太大了。它的编码速度约为每秒3400kb，甚至超过了网络上的高清视频所需。尝试1000kb甚至更低。也许500kb。并且不要在视频文件中包含音轨。
将海报图片保存为jpg而不是png。它是140kb。你可以把它缩小得多。
将所有脚本（移动重定向除外）放在body标签的底部。这样，您至少可以显示文本和背景颜色，而无需加载脚本。

视频背景/ Chrome浏览器仅在用户点击屏幕时显示视频？

1 个答案: