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

你可以设置一个背景，如果它是这样的安卓：

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

Answer 2

我最终得到了两个CSS样式表;一个用于PC，另一个用于手持设备（平板电脑，智能手机等）。

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

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

2 个答案: