在调整页面大小之前,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");
});