javascript - 视频暂停时显示海报图像。如何让它更平滑？

Question

检查代码笔，将鼠标悬停在视频上然后取消悬停:https://codepen.io/simii/pen/ZyxKew

我基本上有一个视频的背景图片，因为如果视频的海报与视频的宽度和高度不一样，它看起来很糟糕。

因为我想在视频未播放时显示图像，所以我用 js 重新加载视频(以显示透明海报，从而显示背景图像)。

但是，如您所见，由于重新加载，视频暂停时它会“闪烁”。

有人对此有更好、更优雅的解决方案吗？

<div class="row container">
  <div class="col-sm-3 video">
    <video id="video1" class="virgin" poster="https://imghost.io/images/2017/07/01/transparent.png" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  </div>

</div>

Answer 1

您可以做几件事。最简单的方法是拥有两个元素(海报元素和视频元素)并在鼠标进入/离开时相互隐藏(如 $('video').css('display','none')) 等等。

您可以做的另一个选择是 hacky 代码 - 在激活任何悬停之前将视频的大小更改为 0x0。

然而，实现这一点的最佳方法肯定是在 col-sm-3 视频中添加元素，一个是图片，一个是视频，您可以在悬停时将其切换。