CODEWITHSUNDEEP
javascriptjqueryhtmlcssvideo
Neimantas Jocius
Neimantas Jocius

Reputation: 109

HTML, JS How to play/stop video on hover

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>

Upvotes: 6

Views: 15348

Answers (4)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

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>

Upvotes: 6

radgex
radgex

Reputation: 143

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

Upvotes: 0

Kenan Balija
Kenan Balija

Reputation: 703

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(); 
}

Upvotes: 0

Eyzi
Eyzi

Reputation: 516

Try:

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

Upvotes: 0

Related Questions