视频中的图像（html5）

Question

我试图通过视频（html5）显示图像。如果我放置视频而不是视频...它可以工作，但是当我将视频放在图像上时：/我该怎么办？

<div class="videohead"> 
<video loop="loop" autoplay="autoplay"> 
<source src="img/video.mp4" type="video/mp4" /> 
<img src="img/video.png"/> 
</video> 
<a href=""><img src="img/logo.png" class="logo"/></a> 
</div> 

.videohead 
{ 
margin: 5px 0 0 1px; 
} 

.logo 
{ 
margin-top: -155px; 
} 

Answer 1

你可以在CSS提供图像有一定的z轴，并设置其为绝对希望帮助位置......

Answer 2

貌似的z-index这里的问题是作为其他用户建议，但只是想补充。如果您只是在视频前显示图片，则还可以使用html5视频标签的海报属性。

http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99

Answer 3

有一个简单的视频属性，允许使用预加载的图像。

“海报”属性定义了替代视频的海报图片。

Answer 4

的海报属性指定的图像，而视频下载被示出，或者直到用户点击播放按钮。如果不包含，则将使用视频的第一帧。

Answer 5

链接：在用z-index CSS3 http://jsfiddle.net/kNMnr/1487/

使用位置。

<div id="wrap_video"> 
    <div id="video_box"> 
     <div id="video_overlays">Logo</div> 
     <div> 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div> 

CSS：

#video_box { 
    position:relative; 
} 
#video_overlays { 
    position:absolute; 
    width:160px; 
    min-height:40px; 
    background-color:#dadada; 
    z-index:300000; 
    bottom:10px; 
    left:10px; 
    text-align:center; 
}