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

Question

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

我将所有网页内容放在 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;
        }