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>
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.
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.
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.
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");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With