視頻中的圖像（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; 
}