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

Question

This is my code, I am trying to make so when I hover over the image it plays a video, and when you hover off it stops the video and goes back to the original image. The issue is when I hover off I am not able to rehover again to play the video again. I was wondering how I can do this so that I can hover over the image more than once to play the video. My coding is below:

<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

You can try to reload video onmouseout event, so that video shows poster again and replays onmouseover.

New Code:

<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

Please load poster onmouseout like this:

<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>