Menu
I'd like to use a html5 video on my web page, here is the code:
<video id="vid" width="100%" autoplay loop>
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The problem is that, when I use webm as video source:
<source src="video/video.webm" type="video/webm">
it works fine on chrome and FF. But as soon as I add mp4 :
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type="video/mp4">
Chrome shows a black screen and the text "waiting for video" on it, But safari and FF show it as expected.
Any suggestions to make it play on all these browsers would be appreciated. Thanks.
977
If you come across an HTML5 page with the following error message “file not found,” then it means your browser doesn't have the proper video codec installed. For example, if you are using Google Chrome and you come across an HTML5 MP4 video, then you may get an error message because you don't have an MP4 codec.
The easiest and fastest way to fix Chrome not playing videos is to ensure that Chrome is completely updated and restarted. If updating doesn't work, try clearing your cache and enabling Adobe Flash or Javascript.
This is a solution I found That worked for my case,
First, embed the video in your html:
<video id="videoId" width="100%" autoplay loop>
<source src="main.webm" type="video/webm">
<source src="main.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Then detect if the Browser is chrome:
var isChrome = !!window.chrome;
var isIE = /*@cc_on!@*/false;
If its chrome, replace the video with webm version. (For those who haven't faced the problem themselves: if you embed both mp4 and webm , chrome will not play any of them, so you have to embed "webm" only)
if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}
And as for IE: In my case I replaced the html5 video with an image:
if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}
I had the same problem and couldn't solve it with any of the proposed solutions, either above or in other threads (updating Google Chrome's version or disabling Chrome's hardware acceleration didn't work either.)
In the end what has solved it for me has been converting the video file to a different mp4 format.
It turned out that I had converted the original mp4 with an MP4 VIDEO encoder, when I should have done so with an H.264 Normal encoder.
Here's the full code:
<video width="320" height="240" controls>
<source src="video/Ruby.ogv" type="video/ogg" />
<source src="video/Ruby.webm" type="video/webm" />
<source src="video/Ruby-iPad.mp4" type="video/mp4" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--<![endif]-->
<img src="video/Ruby.jpg" alt="No video playback capabilities" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>
The code above is an adaptation of the "Video For Everybody" method. You'll find more info at http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/
I use an old version of Wondershare Video Converter but you can do the same job from free online services such as http://video.online-convert.com/
35
Make sure that yout have HTML5 doctype:
<!DOCTYPE html>
This fixed the problem for me.
28
Try swapping the two, put mp4 first and the webm code second, and see what happens. I have this,
<div id="ModelVideo">
<video max-width="100%" controls autoplay muted>
<source src="movie1.mp4" type="video/mp4">
<source src="movie1.webm" type="video/webm" controls>
Your browser does not support the video tag.
</video>
</div>
and mine is working fine in chrome, my mp4 that is, but cant test in the other browsers, although my Dreamweaver tests in Safari as well, and both seem to work fine.
(don't laugh, still working on the website)
Perhaps you can let me know how I can successfully control the volume, seem to have trouble with that one.
27
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
