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>

Solution 1:

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>

HTML, JS How to play/stop video on hover

Solution 1:

Related

Recent Posts