如何将图像放在视频的顶部

Question

我需要在像这样的视频顶部放一个图像

这是我的代码

<video class = "video-hero" autoplay autoplay muted loop id= "video-hero">
<img src=Geo-caching.png
width="140" 
height="140">
<source src="//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm">

Answer 1

您可以在视频标签中添加海报属性，并为其提供所需的图像。<video poster = "Geo-caching.png">

以下是您可以了解更多信息的链接https://www.w3schools.com/tags/att_poster.asp

Answer 2

这可以通过视频标签中的海报属性来完成，

<video controls 
width="400" 
height="200" 
poster=
Geo-caching.png>
<source src=
"//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm" type="video/mp4">
</video>

Answer 3

这可以使用video controls poster属性来完成。poster为您的视频提供缩略图，而controls属性允许控件仍然与图像一起出现，因此当视频开始时，图像会消失。然而，许多浏览器不支持视频标签。在这种情况下，我会使用带有font-awesome播放按钮的JavaScript来类似于此属性。

注意：为了实现这一点，我不得不将autoplay属性从您的视频中删除。

<video controls poster="https://dummyimage.com/700x400/000/fff"  class="video-hero" muted loop id= "video-hero">
<source src="//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm" type="video/mp4">
</video>