HTML, JS How to play/stop video on hover

Question

As you can see I have a question about playing/stoping video on hover. The user would hover the mouse on video and it would start playing and when he move the mouse away video would stop playing. Is it possible and how? I have video tag here

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

Muhammad Omer Aslam · Accepted Answer · 2022-01-17T00:16:04.260

6

Update

A fix is added for the error that was thrown in the console when hovering over the videos (tested in chrome)

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

adding muted="muted" attribute to the video tag fixes the problem. For details see this answer

Here you go

$(document).ready(function() {
  $(".myvideos").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>

edited Jan 17 '22 at 00:16

answered Nov 19 '17 at 20:52

Muhammad Omer Aslam

22,976
9
42
68

Your works, but oposite way. When I move mouse away it plays video – Neimantas Jocius Nov 19 '17 at 20:56
you want it the other way around? – Muhammad Omer Aslam Nov 19 '17 at 20:56
Yes. I need that it would play on hover – Neimantas Jocius Nov 19 '17 at 20:57
Thank you! And one last think. What I need to change so I could make this code work for every video on the same website page and not only on one? – Neimantas Jocius Nov 19 '17 at 20:59
you should assign a separate `class` to all the `video tags` and initialize it with `class` rather than `id`, that way you can `initialize` all the videos with this functionality rather than adding all the ids separately. – Muhammad Omer Aslam Nov 19 '17 at 21:01
i have updated my answer , to your requirements, check it now it has multiple videos @NeimantasJocius – Muhammad Omer Aslam Nov 19 '17 at 21:03

score 0 · Answer 2 · answered Nov 19 '17 at 20:48

0

Try:

$("#video").hover(
    ()=>{ $(this).get(0).play(); },
    ()=>{ $(this).get(0).pause(); }
);

answered Nov 19 '17 at 20:48

Eyzi

516
1
6
20

score 0 · Answer 3 · edited Sep 05 '18 at 23:13

0

To make a video play/pause on hover, try this:

JS:

var figure = $(".video").hover(hoverVideo, hideVideo);

function hoverVideo(e) {
    $('video', this).get(0).play();
}

function hideVideo(e) {
    $('video', this).get(0).pause();
}

CSS:

video::-webkit-media-controls {
    display:none !important;
}

edited Sep 05 '18 at 23:13

Muhammad Omer Aslam

22,976
9
42
68

answered Nov 19 '17 at 20:52

radgex

123
1
6

score 0 · Answer 4 · answered Nov 19 '17 at 21:05

For this you have to use javascript. Easiest would be some kind of implementation with jQuery/javascript implementation.

You could also find this easily on the internet, this took me 3 seconds just by typing the "video on hover" in google: https://codepen.io/gil--/pen/bNxZWg

Html:

<div id="videosList">           
<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
    </video>
  </div>
</div>

You need to watch for hover event on video tag.

var figure = $(".video").hover( hoverVideo, hideVideo );

Now you add a function that plays video on hover:

function hoverVideo(e) {  
  $('video', this).get(0).play(); 
}

And when user leaves the video you add another function:

function hideVideo(e) {
  $('video', this).get(0).pause(); 
}

HTML, JS How to play/stop video on hover

4 Answers4