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

Question

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

我将所有网页内容都放在一个 id 为“content”的 div 中。一切正常，除非网站有需要滚动的信息。如果您删除视频的固定位置，它会起作用，但当然网站会搞砸，因为视频必须设置为固定位置，这样我就可以向下滚动页面而视频不会移动。

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

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

如果我重新加载页面，它会显示海报图像半秒钟然后变黑。

关于如何让它工作的任何提示？或者可能有解决方法？

Answer 1

如果是android的话可以这样设置背景:

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 内容和 video1 设置为这样

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