Play / Pause when mouseover mouseout / mouse hover on off JQuery

Question

jQuery(document).ready(function() {
    if (jQuery('.lwp-video-autoplay .et_pb_video_box').length !== 0) {
        jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').prop('muted', true);
        jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
        jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
        jQuery(".lwp-video-autoplay .et_pb_video_box").each(function() {
            jQuery(this).find('video').get(0).play();
        });
        jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');
    }
});

I am trying to create a video that only plays when you hover over it and pauses when you hover off.

The video shouldn't have an controls. I've found this tutorial https://www.learnhowwp.com/how-to-autoplay-videos-in-divi-video-module-and-hide-controls/ which has got to the point of autoplaying the video.

I would just like to have the video paused orginally and only start whenever I hover over it. Here is the code provided that has worked so far

I've been searching extensively through google + stackoverflow but whatever I try doesn't seem to work within the code I already have. Also trying other examples doesn't work for me. I am not technical so any advance would be much appreciated

Answer 1

Ignoring that mess posted in OP I made an minimal working example:

1. The event handler handles both 'mouseover' and 'mouseout' events
2. The Event.type Event property is used to determine which event is currently triggered.
3. Note this is used instead of $(this). $(this) is a reference to a jQuery Object which doesn't recognize most JavaScript methods like .play() or .pause(). this is a reference to a JavaScript Object which does not recognize jQuery methods but it recognizes JavaScript methods like .play() and .pause().
4. Since the example is in an iframe, you must focus by clicking that area first. After clicking, try hovering over and out of the video.
5. Added [muted] property so it responds to pointer events properly. See VC.One's comment below.

$('video').on('mouseover mouseout', function(e) {
  const evt = e.type;
  if (evt === 'mouseover') {
    this.play();
  }
  if (evt === 'mouseout') {
    this.pause();
  }
});

video {
  display: block;
}

<video src='https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4' width='200' muted></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>