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