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

Question

我使用本网站http://kimcolemanprojects.com/index.html

其视频背景插件在所有浏览器的伟大工程，只对铬的视频不显示，直到屏幕上，这仅仅是一个白色的屏幕上的用户点击。

看起来像它绑定到一个点击事件，但我不能确定在哪里。我无法看到绑定到此页面的事件。

感谢您的帮助。

安吉拉

Answer 1

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

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

<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. 将所有脚本（移动重定向除外）放在body标签的底部。这样，您至少可以在不需要加载脚本的情况下显示文本和背景颜色。