HTML5 <video> 文本覆盖在文本附近执行 onMouseOut load() 函数

Question

我在播放 HTML5 视频时遇到问题。看这是一个视频，当您将鼠标悬停在其中时，它必须显示一个半透明的覆盖层，包括文本。当鼠标出去时，它必须再次显示海报。海报是视频未播放时显示缩略图的属性。

为了展示海报，我搜索了其他 Stack Overflow 问题，解决方法是：video.load();。

所以我有下一段代码：

HTML:

<div class="video-container" onMouseOver="video.play();showOverlay('#video-overlay');" onMouseOut="video.load();hideOverlay('#video-overlay');">
  <video poster="https://example.com/poster.jpg" src="https://example.com/video.mp4" id="video" width="300" muted="muted" loop title="Example video" />
  <a href="#">
    <div class="overlay" id="video-overlay">
      <h5>Overlay Title</h5>
      <p>Overlay Description</p>
    </div>
  </a>
</div>

CSS:

.video-container {
  position: relative;
}

.overlay {
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s ease-in;
    z-index: 999; /* does not work */
}

.overlay > h5 {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
}

JS:

function showOverlay(selector){
  const overlay = document.querySelector(selector);
  overlay.style.opacity = "1";
}
function hideOverlay(selector){
  const overlay = document.querySelector(selector);
  overlay.style.opacity = "0";
}

WATCH THE DEMO

问题：

好吧，当您将鼠标悬停在视频上并且靠近文本（h5 或 p 标签）时，视频会再次加载。它不应重新启动，而是照常继续。

提示：我已将 video.load(); 替换为 video.pause();，一切正常。但这不是我想要的功能。

Answer 1

好的，这里是编辑：

我认为您的问题是由于 mouseover/mouseout 事件和 mouseeenter/mouseleave 事件之间的行为差异造成的。

替换您代码中的事件，应该会为您提供所需的行为

<div class="video-container" onMouseEnter="video.play();showOverlay('#video-overlay');" onMouseLeave="video.load();hideOverlay('#video-overlay');">

关于这些事件的行为和差异的信息和示例：

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

HTML5 <video> 文本覆盖在文本附近执行 onMouseOut load() 函数

HTML5 <video> with text overlay executes onMouseOut load() function near the text

html

javascript

css

html5-video

HTML:

CSS:

JS:

WATCH THE DEMO