在调整页面大小之前，Chrome不会显示HTML5视频 [英] Chrome does not display HTML5 video until page is resized

问题描述

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

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

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

是否有解决此问题的方法，或以某种方式诱使Chrome浏览器正确呈现视频？它看起来不是一个编解码器的问题，因为一旦你调整页面大小，播放效果就很好（页面大小无关紧要，你可以调整它恢复到原来的大小，并继续播放）。

b
$ b

测试网站： www.mashwork.com/testsite

查看代码：

  #mashvid {
位置：绝对; 
 top：0; 
剩下：0; 
身高：100％; 
 width：auto; 
最小宽度：100％; 
 z-index：-5; 
} 
 
< video preload id =mashvidposter =images / mashvid_poster.png> 
< source src =http://www.mashwork.com/testsite/video/mashwork1080.mp4type ='video / mp4; codecs =avc1.42E01E，mp4a.40.2'> 
< source src =http://www.mashwork.com/testsite/video/mashwork1080.ogvtype ='video / ogg; codecs =theora，vorbis'> 
< source src =http://www.mashwork.com/testsite/video/mashwork1080.webmtype ='video / webm; codecs =vp8，vorbis'> 
您的浏览器不支持视频标签。 
< / video> 
  

解决方案

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

一旦文档准备就绪，我现在隐藏控件：

（$ video）;
video.removeAttr（controls）; ）;
}）;

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>

解决方案

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

这篇关于在调整页面大小之前，Chrome不会显示HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！