Android中的HTML5视频背景显示为黑色

Question

我制作了一个带有HTML5视频的网站，该视频包含海报attritube和视频截图。这是因为不支持自动播放以防止过度使用移动数据的智能手机问题。因此，它将在移动平台上显示屏幕截图，而不是视频。

我有一个ID为“content”的div中的所有网页内容。一切正常，除非网站有需要滚动的信息。如果您删除了视频的固定位置，它就会起作用，但当然网站会混乱，因为视频必须设置为固定位置，这样我才能向下滚动页面而不会使视频移动。

#video_background { 
 
    position: fixed; \t 
 
    bottom: 0px; 
 
    right: 0px; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -1000; 
 
    overflow: hidden; 
 
} 
 
    
 
#content { \t 
 
    position: absolute; \t 
 
    text-align: left; \t 
 
    width: 100%; \t 
 
    padding: 15px; \t 
 
}

<video id="video_background" poster="images/video.jpg" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0"> \t 
 
    <source src="webvid_4.mp4" type="video/mp4"> 
 
    Video not supported 
 
</video> 
 
    
 
<div id="content"> \t 
 
    // all information goes here. If too much for the screen, the background goes black. 
 
</div>

如果我重新载入页面，它显示了半秒的海报图像和变黑。

有关如何使此工作的任何提示？或者，也许是一种解决方法？

Answer 1

我只是结束了两个CSS样式表;一个用于个人电脑，一个用于手持设备（平板电脑，智能手机等）。

<script language="javascript"> 
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
    if (mobile) { 
    var $ = document; // shortcut 
    var 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; // shortcut 
    var 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; 
} 

Answer 2

您可以设置背景，如果它是机器人这样的：

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

所以，如果是Android版抹去，让背景显示

<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> 

同时设置CSS内容和视频1作为这

#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; 
     }