Html 视频上的图像 (html5)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5802183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image over a video (html5)
提问by tonio
I'm trying to display an image over a video (html5). If I put an instead of the video ... it works but when I put a the video is over the image :/ What could I do ?
我正在尝试在视频 (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;
}
回答by Vidya Tyagi
Link: http://jsfiddle.net/kNMnr/1487/
链接：http: //jsfiddle.net/kNMnr/1487/
Use position in CSS3 with z-index.
使用带有 z-index 的 CSS3 中的位置。
<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:
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;
}
回答by abhijit
you can provide the image with a certain z -index in css and set its position to absolute hope that helps...
您可以在 css 中提供具有特定 z 索引的图像，并将其位置设置为绝对希望有助于...
回答by Martin Beeby
Looks like the z-index is the problem here as the other user suggest, but just wanted to add. If you are tring to just display a picture before a video you could also use the poster attibute of the html5 video tag.
正如其他用户所建议的那样，看起来 z-index 是这里的问题，但只是想添加。如果您只想在视频之前显示图片，您还可以使用 html5 视频标签的海报属性。
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
回答by RickyAYoder
There is a simple video attribute that allows the use of pre-loaded images.
有一个简单的视频属性，允许使用预加载的图像。
The "poster" attribute defines a poster image that is in place of the video.
“海报”属性定义了代替视频的海报图像。
回答by Franzé Jr.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
海报属性指定在视频下载时或在用户点击播放按钮之前要显示的图像。如果不包含此项，则将使用视频的第一帧。
