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

Question

我目前有一系列视频缩略图 play/pause 当 onmouseover 或 onmouseout 发生时。我想添加一个位于视频顶部的透明背景徽标（.png 文件），然后在 onmouseover 或 onmouseout[= 时消失并重新出现23=] 在保持播放和暂停功能的同时发生。

我尝试使用 poster="url"，但无法实现视频缩略图的透明度或保留 play/pause 功能。任何帮助是极大的赞赏。提前抱歉我猜是丑陋的代码。我无法正常工作。

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:relative div 中，class 在悬停时隐藏包含的 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

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

有几点需要注意：

定位徽标：此代码段在 a 元素上使用 flex 并将其居中

让视频在开始时显示（然后不播放），这样您就不会只有一个空白的黑色矩形。此代码段通过在 0.1 秒 (#t=0.1) 移动到帧来实现。

a元素中的href值需要引号

视频中的window=100%不合法（%不允许）。此代码段使用 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

谢谢你们。我能够实施你的方法乔希。下面的最终代码。尽管我的视频 div 和结束标记在 Liveweave 中仍然出现错误。我认为这是语法错误是否正确？

<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%;
}

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

How can I add a transparent image overlay on top of a video?

html

javascript

css

video

overlay