jQuery.hoverPlay

Play a video on mouse enter, pause on mouse out

Live demo and documentation

Installing

Just download jquery.hoverplay.js or jquery.hoverplay.min.js and add it to your HTML file:

<script type="text/javascript" src="js/jquery.hoverplay.min.js"></script>

Basic usage

Automatic mode

Create a video element and add a data-play="hover" attribute.

That's it.

Manual mode

Call hoverPlay on your selected elements:

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

You may also pass an options object:

$('#video').hoverPlay({   playDelay: 500,   pauseDelay: 100 });

Advanced usage

You may override the default callbacks if you'd like to add/remove a class or perform additional DOM manipulation:

$.extend(true, $.hoverPlay.defaults, {   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();     }   } });

Requirements

• jQuery 1.8+
• A recent/decent web browser (Firefox, Chrome or Opera suggested; IE/Edge NOT TESTED/DON'T CARE)
• A valid HTML 5 DOCTYPE (for video tags)

Licensing

MIT Licensed

Contributing

Fork the repo, add an interesting feature or fix a bug and send a pull request.

Troubleshooting

Open an issue and provide a clear description of the error, how to reproduce it and your test environment specs (browser, jQuery version, etc.)

Credits

Lead coder: biohzrdmx (github.com/biohzrdmx)