[英]How can I add a transparent image overlay on top of a video?
I currently have a series of video thumbnails that play/pause when onmouseover or onmouseout occurs.我目前有一系列视频缩略图,当onmouseover或onmouseout发生时播放/暂停。 I would like to add a logo with a transparent background (a .png file) that sits on top of the video and then disappears and reappears when onmouseover or onmouseout occurs while maintaining the play and pause functionality.
我想添加一个具有透明背景(.png 文件)的徽标,该徽标位于视频顶部,然后在onmouseover或onmouseout发生时消失并重新出现,同时保持播放和暂停功能。
I tried using poster="url"
but I have not been able to achieve transparency over the video thumbnail or retain the play/pause functionality.我尝试使用
poster="url"
但我无法实现视频缩略图的透明度或保留播放/暂停功能。 Any help is greatly appreciated.任何帮助是极大的赞赏。 Sorry in advance for what I'm guessing is ugly code.
提前抱歉我猜是丑陋的代码。 I'm way out of my element trying to get this to work.
我已经脱离了我的元素,试图让它发挥作用。
https://www.wrkshrt.com/ is a good reference for the functionality I'm seeking. 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>
I'd throw them both in a position:relative div with a class that hides a contained img on hover.我会将它们都放在一个位置:相对 div 与一个在悬停时隐藏包含的 img 的类。 You still have to tell the img where to be within the div.
您仍然必须告诉 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>
You can overlay the image by making, say, the video position absolute.您可以通过将视频位置设为绝对位置来覆盖图像。
There are a few things that need attention:有几点需要注意:
Positioning the logo: this snippet does it using flex on the a element and centering it定位徽标:此代码段在 a 元素上使用 flex 并将其居中
Getting the video to show at the start (without then playing) so you don't just have a blank black rectangle.让视频在开始时显示(然后不播放),这样您就不会只有一个空白的黑色矩形。 This snippet does it by moving to the frame at 0.1seconds (#t=0.1).
此代码段通过在 0.1 秒 (#t=0.1) 处移动到帧来实现。
The href value in the a element needs quotes a 元素中的 href 值需要引号
The window=100% in the video is not legal (% not allowed).视频中的 window=100% 是不合法的(% not allowed)。 This snippet uses CSS to size the video - making it fit within whatever the dimensions of the parent are.
此片段使用 CSS 来调整视频大小 - 使其适合父级的任何尺寸。
The parent is given some dimensions just for this demo.仅针对此演示为父级提供了一些尺寸。 You will have decided what size it is to be (or maybe it is in a flexbox or grid alongside others?)
你已经决定了它的大小(或者它可能在一个 flexbox 或网格中?)
Pointer events on the img are ignored so that they can be picked up on the video underneath.忽略 img 上的指针事件,以便可以在下面的视频中拾取它们。
Incidentally, how will this all work for the user on a touch device?顺便说一句,这对触摸设备上的用户来说是如何工作的? I guess that's for another question.
我想这是另一个问题。
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>
Thanks to both of you.感谢你们俩。 I was able to implement your method Josh.
我能够实现你的方法 Josh。 Final code below.
最终代码如下。 Although I'm still getting errors in Liveweave with my video, div, and a closing tags.
尽管我的视频、div 和结束标签在 Liveweave 中仍然出现错误。 Am I correct in thinking that's a syntax error?
我认为这是语法错误是否正确?
<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 Below下面的 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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.