Play a video on mouse enter, pause on mouse out
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
jquery.hoverplay.js
jquery.hoverplay.min.js

README.md

jQuery.hoverPlay

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)