Html和Hmtl5視頻

Question

我有我的視頻在後臺播放，但如何在視頻中添加圖片？我有點想它像這樣image over videoMy video

body, html { 
 
    margin: 0; 
 
    padding:0; 
 
} 
 
video{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: 1; 
 
}

<div class="container" > 
 
    <video poster="Sample.jpg" autoplay="true" loop id="video"> 
 
     <source src="Burning.mp4" type="video/mp4"> 
 
     <source src="Burning.webm" type="video/webm"> 
 
    </video>

Answer 1

你總是可以建立HTML結構如圖所示的圖像，並使用一些視頻播放器插件一樣使用視頻作爲其背景圖像（http://vodkabears.github.io/vide/）。

Answer 2

body, html { 
 
    margin: 0; 
 
    padding:0;} 
 
.container{ width: 70%; background: #000; margin: auto; } 
 
.vid{float: left; width: 100%; } 
 
video{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -1; 
 
}

<div class="container" > 
 
    <video poster="Sample.jpg" autoplay="true" loop id="video"> 
 
     <source src="1.mp4" type="video/mp4"> 
 
     <source src="1.webm" type="video/webm"> 
 
    </video> 
 
    <img src="http://via.placeholder.com/350x150"> 
 
</div>

容器中心和圖像放置在視頻的頂部