Auto Play & Pause HTML5 Video On Hover - hoverPlay
File Size: | 4.89 KB |
---|---|
Views Total: | 18533 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.