Play Video using Html5 across browsers

<video controls=”controls” id=”bgvid” preload=”none” loop=”true” autoplay=”autoplay”>
<source src=”shutterstock_v2991502.mov” type=”video/mp4″ />
<source src=”shutterstock_v2991502.webm” type=”video/webm” />
Your browser does not support the video tag.
</video>

Video Attributes & Its Uses :

controls=”controls”-> To view the control options in video, you can use this video controls or else ignore.

loop=”true”->To play the video continuously.

autoplay=”autoplay”-> Does not supports in iphone.

webm->To support the video in safari browser.

STYLES FOR THE VIDEO TO BE PLAYED IN FULL WIDTH SCREEN :

#bgvid {
position: fixed;
min-width: 96%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}

JQUERY CSS TO SUPPORT IN RESPECTIVE BROWSERS :

For Opera Mini Browser:

$(document).ready(function() {
if((navigator.userAgent.indexOf(“Opera”) || navigator.userAgent.indexOf(‘OPR’)) != -1 )
{
document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘bgvid’).style.zIndex=’50%’;
}

For Chrome Browser:

else if(navigator.userAgent.indexOf(“Chrome”) != -1 )
{
document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘bgvid’).style.zIndex=’-1000′;
}

 

For Safari Browser:

else if(navigator.userAgent.indexOf(“Safari”) != -1)
{

if($(window).width() > 768)
{
document.getElementById(‘bgvid’).style.top=’0′;
document.getElementById(‘bgvid’).style.left=’0′;
document.getElementById(‘bgvid’).style.zIndex=’-1000′;
document.getElementById(‘bgvid’).style.height= “auto”;
document.getElementById(‘bgvid’).style.width= ‘100%’;
} else {
document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘bgvid’).style.zIndex=’-1000′;
document.getElementById(‘bgvid’).style.height= “auto”;
document.getElementById(‘bgvid’).style.width= ‘100%’;
}

}

For Firefox Browser:

else if(navigator.userAgent.indexOf(“Firefox”) != -1 )
{
document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘bgvid’).style.zIndex=’-1000′;

}

For Internet Explorer Browser:

else if((navigator.userAgent.indexOf(“MSIE”) != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{

document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘admintop’).style.position=’absolute’;
document.getElementById(‘admintop’).style.marginTop=’10%’;
document.getElementById(‘admintop’).style.width=’100%’;
}
else
{
document.getElementById(‘bgvid’).style.top=’50%’;
document.getElementById(‘bgvid’).style.left=’50%’;
document.getElementById(‘bgvid’).style.zIndex=’-1000′;
}
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s