Chrome does not display HTML5 video until page is resized

问题

I am attempting to create a full background video for a website I am developing.

I have my video tags all set up properly, and it plays great in Safari and Firefox, but in Chrome there are issues.

When I hit play in Chrome the audio starts playing, but no video appears. The video only appears if you resize the page or do something else visual such as selecting text on the page. Then the page displays the video.

Is there a fix for this, or some way to trick Chrome into properly rendering the video? It doesn't appear to be a codec issue since it plays just fine once you resize the page (and page size doesn't matter, you can resize it back to the original size and it will keep playing).

Testsite: www.mashwork.com/testsite

See code:

#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>

回答1:

I had the same problem within chrome. I added controls to the video and it fixed the problem.

I now hide the controls once the doc is ready:

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

来源：https://stackoverflow.com/questions/8214482/chrome-does-not-display-html5-video-until-page-is-resized