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>

容器中心和图像放置在视频的顶部