html5 video issue with chrome

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="https://stackoverflow.com/questions/16773986/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="https://stackoverflow.com/questions/16773986/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="https://stackoverflow.com/questions/16773986/img/video.jpg" />'));
}