Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 252
mattaningram Avatar asked Nov 21 '11 15:11

mattaningram


People also ask

Why is my video not working in HTML5?

If your browser error "HTML5 video file not found", it means that your browser is not up to date or website pages does not have a suitable video codec. It would help if you communicated with the developer to solve the issue and install all the required codecs.

Why is my video not loading in HTML?

If you encountered “HTML5 video not found” error while playing a video on any website then it implies your browser doesn't support the HTML5 format codecs or your browser doesn't have the proper video codec installed.

Does the Chrome support video tag in HTML?

The <video> element is supported by all modern browsers. However, not all browsers support the same video file format. MP4 files are the most widely accepted format, and other formats like WebM and Ogg are supported in Chrome, Firefox, and Opera.


1 Answers

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");
});
like image 140
Jeffrey Krause Avatar answered Sep 29 '22 15:09

Jeffrey Krause