google-chrome - 在页面调整大小之前，Chrome 不会显示 HTML5 视频

Question

我正在尝试为我正在开发的网站创建完整的背景视频。

我的视频标签都设置正确，它在 Safari 和 Firefox 中运行良好，但在 Chrome 中存在问题。

当我在 Chrome 中点击播放时，音频开始播放，但没有出现视频。仅当您调整页面大小或执行其他视觉操作(例如选择页面上的文本)时，才会显示视频。然后页面显示视频。

有没有解决这个问题的方法，或者有什么方法可以诱使 Chrome 正确渲染视频？它似乎不是编解码器问题，因为一旦您调整页面大小，它就可以正常播放(页面大小无关紧要，您可以将其调整回原始大小，它会继续播放)。

测试站点:www.mashwork.com/testsite

见代码:

#mashvid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    min-width: 100%;
    z-index: -5;
}

<video preload id="mashvid" poster="images/mashvid_poster.png">
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
      Your browser does not support the video tag.
</video>

Answer 1

我在 chrome 中遇到了同样的问题。我在视频中添加了控件并解决了问题。

一旦文档准备好，我现在隐藏控件:

$(document).ready(function() {
  var video = document.getElementById("video");
  video.removeAttr("controls");
});