如何在視頻頂部添加透明圖像疊加層？

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

我會將它們都放在一個位置：相對 div 與一個在懸停時隱藏包含的 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% 是不合法的（% 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

感謝你們倆。 我能夠實現你的方法 Josh。 最終代碼如下。 盡管我的視頻、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%;
}