html5 video issue with chrome

8

votes

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.

htmlgoogle-chromehtml5-video

I am having the same problem, please see: stackoverflow.com/questions/16937480/… – Stephan Luis

6

votes

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

4

votes

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/

3

votes

Make sure that yout have HTML5 doctype:

<!DOCTYPE html>

This fixed the problem for me.

2

votes

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.

0

votes

Problem with Chrome is that once it downloads the video it does not play it.

YOu can solve it by adding a small javascript snippet :

this.interval = setInterval(function(){
  this.countForVideo = document.getElementById('vid').readyState;
  if(this.countForVideo == 4){
    document.getElementById('vid').play();
    clearInterval(this.interval);
  }
},2000);

This will check if the video is downloaded every 2 sec. If the video is downloaded, it will play the video and stop the interval.

html5 video issue with chrome

5 Answers