在调整页面大小之前，Chrome 不会显示 HTML5 视频答案

【问题标题】：Chrome does not display HTML5 video until page is resized在调整页面大小之前，Chrome 不会显示 HTML5 视频
【发布时间】：2013-07-31 01:46:46
【问题描述】：

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

我的视频标签设置正确，在 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>

【问题讨论】：

刚刚添加了它，以及指向我正在开发的网站的链接，这样您就可以看到它在 Safari 和 Firefox 中的工作原理，但在 Chrome 中却没有。
在 chrome 15.0.874.121 中它工作得很好
我不知道我做了什么，但现在可以了。

标签： google-chrome html5-video

【解决方案1】：

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

文档准备好后，我现在隐藏控件：

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

【讨论】：