html5 video issue with chrome

html google-chrome html5-video

87,182

Solution 1

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

Solution 2

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/

Solution 3

Make sure that yout have HTML5 doctype:

<!DOCTYPE html>

This fixed the problem for me.

Solution 4

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.

View more solutions

87,182

Author by

Ramtin Gh

developer;

Updated on May 16, 2020

Comments

Ramtin Gh almost 4 years
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.
Ramtin Gh almost 11 years

Hi, Thanks for the answer, I've had tried it and it doesn't solve the problem. As for the volume, I couldn't understand what you mean? I've checked your website and there is no video / audio, its just a headline and a picture.
Galaxy Surfer over 8 years

I had the same as Carme. First I used an .mp4 file and it worked like a charm. Then I resized it and the thing didn't play anymore. After some research and some trying (I didn't find this post yet...) I tried the H.264 coded/container and it worked perfectly ever since. I used MPEG Streamclip. Btw for me this code was sufficient for my purpose: '<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>'
Galaxy Surfer over 8 years

Sorry, wanted to put the code in a neatly formatted code box but I'm not allowed anymore. Hope my comment is clear though.
Ibrahim Iqbal over 6 years

Didn't worked for me . I also added jQuery library and pasted the CSS n HTML in a brand new file still nothing appeared in Chrome.