Html5 Video Background In Android Showing Black

I've made a website with a HTML5 video that has a poster attritube with a screenshot from the video. This is because of the smartphone issue where autoplay is not supported to prev

Solution 1:

You can set a background if it is android like this:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");if(isAndroid) {
    document.getElementById("content").innerHTML="";
}

So, if is it android you erase and let the background display

<div id="content" onmouseover="OutContainer();">
    <video id="video1" onmouseover="OutContainer();" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0">
       <source src="mov_bbb.mp4"type="video/mp4">
       Your browser does not support HTML5 video.
    </video>
</div>

set both CSS content and video1 as this

#content
        {
            position: fixed; right: 0; bottom: 0;
            min-width: 100%; min-height: 100%;
            width: auto; height: auto; z-index: -100;
            background: url(background.jpg) no-repeat;
            background-size: cover;
        }

Solution 2:

I simply ended up with two CSS-stylesheets; one for PC and one for handhelds (tablets, smartphones etc.).

<script language="javascript">
 var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
  if (mobile) {
   var $ = document; // shortcutvar cssId = 'handheld';  
   if (!$.getElementById(cssId))
    {
      var head  = $.getElementsByTagName('head')[0];
      var link  = $.createElement('link');
      link.id   = cssId;
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/handheld.css'; // stylesheet
      link.media = 'all';
      head.appendChild(link);
     };
   }
   else{
    var $ = document; // shortcutvar cssId = 'workstation'; 
    if (!$.getElementById(cssId))
     {
      var head  = $.getElementsByTagName('head')[0];
      var link  = $.createElement('link');
      link.id   = cssId;
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/workstation.css'; // stylesheet
      link.media = 'all';
      head.appendChild(link);
     };
   } 
</script>

Handheld.css:

body{
 background-image: url(/images/video.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;

 background-size: cover;
     }

div#video{
 visibility:hidden;
     }

Workstation.css:

div#video {
 visibility:visible;
}