Question

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

我的视频标签设置正确，在Safari和Firefox中效果很好，但在Chrome中存在问题。

当我在Chrome中点击播放时，音频开始播放，但不会显示任何视频。只有在您调整页面大小或执行其他可视化操作（例如在页面上选择文本）时，才会显示视频。然后页面显示视频。

是否有解决此问题的方法，或某种方式诱骗Chrome正确呈现视频？它似乎不是一个编解码器问题，因为它一旦你调整页面大小就可以正常播放（页面大小无关紧要，你可以将它调整回原来的尺寸并继续播放）。

Testsite：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");
});

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

1 个答案: