Android中的HTML5视频背景显示为黑色 [英] HTML5 video background in Android showing black

问题描述

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

I've made a website with a HTML5 video that has a poster attritube with a screenshot from the video. This is because of the smartphone issue where autoplay is not supported to prevent excessive use of mobile data. Therefore, it will show the screenshot instead of the video on mobile platform.

我将所有网页内容都放在一个ID为"content"的div中.一切正常，除非网站上有需要滚动的信息.如果您删除了视频的固定位置，则可以使用它，但是网站肯定会混乱，因为必须将视频设置为固定位置，这样我才能向下滚动页面，而视频不会继续前进.

I have all the webpage contents in a div with id "content". Everything works just fine, except when the website has information that needs scrolling. If you remove the fixed position for the video, it works, but then of course the website is messed up, as the video must be set to fixed position so I can scroll down the page without the video moving along.

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

如果我重新加载页面，它将显示海报图像半秒钟并变黑.

If I reload the page, it shows the poster image for half a second and turns black.

有关如何使其正常工作的任何提示?还是可行的解决方法?

Any tips on how to get this to work? Or maybe a workaround?

推荐答案

我最终得到了两个CSS样式表；一种用于PC，另一种用于掌上电脑(平板电脑，智能手机等).

I simply ended up with two CSS-stylesheets; one for PC and one for handhelds (tablets, smartphones etc.).

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

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:

Workstation.css:

div#video {
 visibility:visible;
}

这篇关于Android中的HTML5视频背景显示为黑色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！