HTML, JS How to play/stop video on hover

user_6087311 0
Viewed 13029

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>
video css html jquery javascript
4 Answers

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>

user_37316140

Try:

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

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

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