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
Ignoring that mess posted in OP I made an minimal working example:
Event.type Event property is used to determine which event is currently triggered.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().[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>