当我移动鼠标时，为什么我的视频上会出现海报？

Question

我正在尝试使用 mouseover/mouseout 制作以下代码来播放和暂停 HTML 视频。

  <div>
    <video id="video" controls width="50%" class="border" onmouseout="Stop()" onmouseover="Play()" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>

  </div>
</div>

JS

function Play() {
     $('#video').get(0).play();
 }
 function Stop() {
      $('#video').get(0).pause();
  }

我想要的是每次鼠标移开时，视频上都会出现一张海报或图像。 （如本站下面的例子：https://www.lawebdecanada.com/work/featured/）

我注意到能够做到，希望有人可以帮助我弄清楚如何做到这一点。 这是我在 codepen 上的代码：https://codepen.io/felixgonzalo/pen/abzQPjZ

谢谢！

Answer 1

要让一个元素覆盖另一个元素，您可以将它们放在同一个容器中，并在覆盖层上使用position: absolute 和更高的z-index。然后在 mouseenter 和 mouseleave 事件下（注意：not mouseout 和 mouseover）您可以隐藏/显示叠加层并播放。/暂停视频。试试这个：

var container = document.querySelector('.video-container');

container.addEventListener('mouseleave', function() {
  this.querySelector('.overlay').classList.remove('hide');
  this.querySelector('.video').pause();
});

container.addEventListener('mouseenter', function() {
  this.querySelector('.overlay').classList.add('hide');
  this.querySelector('.video').play();
});

.video-container {
  position: relative;
  width: 300px;
}
.video-container video {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #C00;
  color: #FFF;
  display: block;
  z-index: 10;
  text-align: center;
}
.overlay.hide {
  display: none;
}
.overlay p {
  margin-top: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <video class="video" controls class="border" controls="false">
    <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
  </video>
  <div class="overlay">
    <p>Hover me</p>
  </div>
</div>

Answer 2

您可以在Stop 函数中将currentTime 的值重置为0：

$('#video').prop('currentTime', 0)

function Play() {
     $('#video').get(0).play();
}
function Stop() {
    $('#video').prop('currentTime', 0).get(0).pause();
}

video::-webkit-media-controls {


    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div>
    <video id="video" controls width="50%" class="border" onmouseout="Stop()" onmouseover="Play()" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>
           
  </div>
</div>

Answer 3

您链接的网站通过有一个父元素来实现这一点，该父元素包含一个带有图像的 div 元素和另一个带有视频的 div 元素。

CSS 用于隐藏 div 元素，如下所示：

.parent:hover .preview {
    display: none;
}

您可以使用您拥有的 JavaScript 代码，但不鼓励使用 HTML 属性来控制事件。

Answer 4

我根据你的CodePen做了一个例子，修改了一些小东西，并添加了一个使用CSS过渡的覆盖来实现悬停效果，希望对你有所帮助~

function Play() {
     $('#video').get(0).play();
}
function Stop() {
    $('#video').get(0).pause();
}

.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding-top: 50px;
  color: white;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: 0.3s opacity;
}

.overlay:hover {
  opacity: 0;
}

video {
  width: 100%;
}

video::-webkit-media-controls {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="overlay" onmouseout="Stop()" onmouseover="Play()">
      Overlay
    </div>
    <video id="video" controls class="border" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>
</div>