onmouseover & onmouseout help - unable to continually to do it-CodePudding

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 >
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onm ouseover="this.play()" onm ouseout="this.src='assets/img/product/mac-flower.png';">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

CodePudding user response：

You can try to reload video onm ouseout event, so that video shows poster again and replays onm ouseover.

New Code:

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

CodePudding user response：

Please load poster onm ouseout like this:

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