在视频标签中实现海报背景图像的最佳方式

Question

你好堆叠器，

首先是一些背景，我的视频在每个设备和浏览器上都没有功能，所以我想通过在视频不播放时显示图像进行补偿，我尝试实现了海报属性：

<video autoplay poster="http://kadeem.london/Image/kadeem-bg.jpg>

但它看起来并不好看。然后我实现了一些css：

 video{
       background:transparent url('http://kadeem.london/Image/kadeem-bg.jpg');
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 

 }

例如，当一位访客在一个旧的移动设备上查看该网站时，它没有找到一个黑色的屏幕，而是一张很好的封面照片。然而，当视频最终在桌面上播放时，图像在视频加载之前仅显示一秒，因此不太吸引人。您可以查看此here的实际示例。有没有办法让这个概念变得完全流畅，所以当视频功能正常时图像会隐藏？

请在下面找到HTML5和CSS。

提前谢谢你。

 .Intro-Video {
     position: relative;
     z-index: 9999;
     width: 100%;
     display: block;
     background-color: #fff;
     -webkit-backface-visibility: hidden;
     overflow: hidden;
 }

 @media (max-width: 600px){
 	.Intro-Video{
 		background-image: url(http://kadeem.london/Image/kadeem-bg.jpg);
 		width: 100%;
 		background-size:cover;
 	}
 }
 .video-box {
     height: 100%;
     width: 100%;
     position: relative;
 }
  @media (max-width: 600px){
  	.video-box{
  		visibility: hidden;
  	}
  }
 #video-container {
     height:100%;
     width:100%;
     overflow: hidden;
 }

   @media (max-width: 600px){
  	#video-container{
  		visibility: visible;
  	}
  }

 video {
     position:absolute;
     z-index:0;
 }
 video.fillWidth {
     width: 100%;
 }

 video{
 	   background:transparent url('http://kadeem.london/Image/kadeem-bg.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
 
 }

@media (max-width:600px){
	video{visibility:hidden;
	}
}
 

<div class="Intro-Video">
<div class="video-box">
<div id="video-container">
<video autoplay class="fillWidth">
<source src="http://kadeem.london/Video/Trailer.mp4" type="video/mp4"/>
</video>
<div class="Kadeem-Logo">
<img src="http://kadeem.london/Image/KL_wall.png" alt="Kadeem Logo" title="Kadeem Logo">
</div>
</div>
</div>
</div>