jQuery.hoverPlay

Introduction

Play a video on mouse enter, pause on mouse out

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');
        }
    }
});

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)

Support me

Did you find this project useful?

Then you may want to support me by buying me a coffee!

JavaScript, jQuery