HTML5带文字浮层的视频靠近文字时触发onMouseOut的load()问题

问题根源 #

你当前使用的mouseover、mouseout事件存在冒泡特性：当鼠标移入.video-container内部的子元素（如overlay、h5、p标签）时，会先触发父容器的mouseout事件执行video.load()导致视频重载，随后事件冒泡又会触发父容器的mouseover事件重新播放视频，因此出现了鼠标靠近文本时视频反复重启的问题。

解决方案 #

将绑定在.video-container上的事件替换为不会冒泡的mouseenter和mouseleave事件，这两个事件仅在鼠标真正进入/离开父容器边界时触发，不会受内部子元素干扰，同时保留video.load()逻辑满足重新显示poster的需求。
附带解决overlay z-index不生效的问题：z-index仅对定位元素生效，给video标签添加position: relative属性即可让overlay的层级设置生效。

修改后的HTML代码 #

<div class="video-container" onMouseEnter="video.play();showOverlay('#video-overlay');" onMouseLeave="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" style="position: relative;" />
  <a href="#">
    <div class="overlay" id="video-overlay">
      <h5>Overlay Title</h5>
      <p>Overlay Description</p>
    </div>
  </a>
</div>

可选优化（简化JS逻辑） #

你可以直接用CSS hover实现浮层的显隐，无需编写JS的showOverlay和hideOverlay函数，修改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;
}
/* 父容器hover时显示浮层 */
.video-container:hover .overlay {
    opacity: 1;
}

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

采用该方案后，HTML中的事件绑定可以简化为：

<div class="video-container" onMouseEnter="video.play();" onMouseLeave="video.load();">

内容的提问来源于stack exchange，提问作者Peter Palmer