onmouseover 和 onmouseout 帮助 - 无法持续​​执行

Question

这是我的代码，我正在努力做到这一点，当我将鼠标悬停在图像上时它会播放视频，而当您将鼠标悬停在其上时它会停止播放视频并返回到原始图像。问题是当我悬停时我无法再次悬停以再次播放视频。我想知道如何做到这一点，以便我可以多次将鼠标悬停在图像上以播放视频。我的编码如下：

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.src='assets/img/product/mac-flower.png';">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

Answer 1

您可以尝试重新加载视频的 onmouseout 事件，以便视频再次显示海报并重播 onmouseover。

新代码：

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()"onmouseout="this.load()">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

Answer 2

请像这样在 mouseout 上加载海报：

<div class="thumb">
      <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.load()">
        <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
      </video>
    </div>