Question

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

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

由于我想在视频播放时显示图像，我会用js重新加载视频（以显示透明海报，从而显示背景图像）。

但是，正如你所看到的那样，＆＃34;闪烁＆＃34;视频暂停时，由于重新加载。

任何人都有更好，更优雅的解决方案吗？

<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视频中有一个元素，一个是图片，一个是视频，你可以在悬停时切换。

在视频暂停时显示海报图像。如何让它更顺畅？

1 个答案: