Auto Play & Pause HTML5 Video On Hover - hoverPlay

hoverPlay is a small and user-friendly jQuery plugin that automatically plays HTML5 video when hovering and automatically pauses when the mouse leaves.

How to use it:

1. Load the minified version of the jQuery hoverPlay plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.hoverplay.js"></script>

2. To initialize the plugin automatically, just add the data-play="hover" attribute to the HTML5 video and done.

<video width="320" height="240" controls data-play="hover">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

3. Note: To make the plugin work properly with Chrome 66+, you must add the muted="muted" attribute to your HTML5 video. Otherwise you will encounter the following error: 'Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.'. Visit the Autoplay Policy Changes for more details.

<video width="320" height="240" controls data-play="hover" muted="muted">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. You're also allowed to initialize the plugin via JavaScript.

$(function(){

  $('#videoID').hoverPlay();

});

5. Customize the play/pause delay in milliseconds.

$('#videoID').hoverPlay({
  // defaults
  playDelay: 350,
  pauseDelay: 0
});

6. Trigger functions when the video starts playing or gets paused.

$('#videoID').hoverPlay({
  callbacks: {
    play: function(el, video) {
      video.play();
      el.addClass('hoverPlay');
    },
    pause: function(el, video) {
      video.pause();
      el.removeClass('hoverPlay');
    },
    click: function(el, video, e) {
      e.preventDefault();
    }
  }
});

Changelog:

2019-01-31

• Added callback for play event

---

This awesome jQuery plugin is developed by biohzrdmx. For more Advanced Usages, please check the demo page or visit the official website.