如何在视频顶部添加透明图像叠加?

Question

我目前有一系列视频缩略图，当onmouseover时播放/暂停onmouseout 发生。我想添加一个透明背景的标志(.png文件)，它位于视频顶部，然后消失，当onmouseover时重新出现onmouseout 在保持播放和暂停功能时发生。

我尝试使用poster="url"，但我无法在视频缩略图上实现透明度或保留播放/暂停功能。非常感谢任何帮助。抱歉提前我猜是丑陋的代码。

https://www.wrkshrt.com/是我正在寻找的功能的一个很好的参考。

<div>
<a href=/districtvision>
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width=100%>
<source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/ogg">
</video>
</a>
</div>

Answer 1

我会把它们都放在position:relativediv中，并添加一个类，在悬停时隐藏包含的img。您仍然需要告诉img在div中的位置。

<style>
.gone:hover img{display:none;}
</style>
<a href=/districtvision>
<div class="gone" style="position:relative;">
<img src="yourImage.png" style="position:absolute;z-index:1;">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/mp4">
</video>
</div>
</a>

Answer 2

您可以通过使视频位置为绝对位置来覆盖图像。

有几件事需要注意:

定位logo:这个代码片段在a元素上使用flex并将其居中

让视频在开始时显示(而不是播放)，这样你就不会只有一个空白的黑色矩形。下面的代码段在0.1秒(#t=0.1)时移动到帧中。

a元素中的href值需要加引号

视频中的窗口=100%不合法(% not allowed)。这个片段使用CSS来调整视频的大小，使其适合父元素的大小。

父元素仅为本演示提供了一些维度。您将决定它的大小(或者它可能是在flexbox或网格旁边的其他人?)

img上的指针事件被忽略，以便它们可以被下面的视频拾取。

顺便说一下，这一切在触摸设备上是如何工作的?我想这是另一个问题。

a {
position: relative;
width: 200px;
aspect-ratio: 16 / 9;
display: inline-block;
justify-content: center;
display: flex;
}

img {
position: relative;
top: 0;
left: 0;
margin: auto auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
pointer-events: none;
}

a:hover img {
display: none;
}

video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

<div>
<a href="/districtvision">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width=100>
<source src="https://topspinstudios.com/s/DV-Loop.mp4#t=0.1" type="video/ogg">
</video>
<img src="https://i.stack.imgur.com/y1jXa.png">
</a>
</div>

Answer 3

谢谢你们俩。我可以实现你的方法，乔什。下面是最终代码。虽然我仍然得到错误在Liveweave与我的视频，div和结束标签。我认为这是一个语法错误，对吗?

<video autoplay=autoplay loop muted class="reel">
<source src="https://drive.google.com/uc?export=download&id=1wlICW95QiyJAHHwySaFVGIi5HsA5eoCC" type="video/mp4">
</video>

<div class="wrapper">
<a href="/hastalaraiz">
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/Hasta-Poster.png" style="position:absolute;z-index:1;" class="hasta">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/hasta-loop.mp4" type="video/mp4">
</video>
</div>
</a>
<a href="/unfenced">
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/Unfenced-Poster.png" style="position:absolute;z-index:1;" class="unfenced">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/Unfenced-Loop-hffs.mp4" type="video/mp4">
</video>
</div>
</a>
<a href="/districtvision">
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/DV-Poster.png" style="position:absolute;z-index:1;" class="districtvision">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/DV-Loop-3.mp4" type="video/mp4">
</video>
</div>
</a>
<a href="/panchoclaus">
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/Pancho-Poster.png" style="position:absolute;z-index:1;" class="districtvision">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/Pancho-Loop.mp4" type="video/mp4">
</video>
</div>
</a>
<a href="/ridingfromtheheart">
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/RFTH-Poster.png" style="position:absolute;z-index:1;" class="ridingfromtheheart">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/Riding-From-The-Heart-Loop.mp4" type="video/mp4">
</video>
</div>
</a>
<!-- <a href="/dadstrength"> -->
<div class="gone" style="position:relative;">
<img src="https://topspinstudios.com/s/DadStrength-Poster.png" style="position:absolute;z-index:1;" class="dadstrength">
<video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
<source src="https://topspinstudios.com/s/DadStrengthLoop.mp4" type="video/mp4">
</video>
</div>
</a>
</div>

CSS低于

.reel {
height: auto;
margin-bottom: 2em;
pointer-events: none;
width: 100%;
}
.wrapper {
column-gap: 1em;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 1em;
}
.gone:hover img {
display: none;
}
.hasta {
display: block;
margin: 10%;
width: 80%;
}
.unfenced {
display: block;
margin: 10%;
width: 80%;
}
.districtvision {
display: block;
margin: 10%;
width: 80%;
}
.panchoclaus {
display: block;
margin: 10%;
width: 80%;
}
.ridingfromtheheart {
display: block;
margin: 10%;
width: 80%;
}
.dadstrength {
display: block;
margin: 10%;
width: 80%;
}