How to pause a video when mouse is taken off?

Question

I was messing around to find a way to pause or mute a video, if we take off our cursor from it with using HTML5 and CSS3 only.But i was unable to find a way. Is there any way to achieve this ?

I really doubt it. But it's straightforward with a bit of JS. See Gaby aka G. Petrioli's [fiddle](http://jsfiddle.net/gaby/0o8tt2z8/1/) from [this answer](http://stackoverflow.com/a/26779453/1693947) — Huey, May 02 '15 at 06:53

score 1 · Answer 1 · answered May 02 '15 at 06:54

If you're using jQuery and HTML5 video, you could do something like:

var vid = $(".myVideo"); 
vid.mouseleave(function() {
    vid.pause()
});

Then, when you want to play again,

vid.mouseenter(function() {
    vid.play()
});

The functions vid.play() and vid.pause() are built in so this shouldn't give you any trouble.

score 0 · Answer 2 · answered May 02 '15 at 07:50

Your HTML:

<div id="video-wrapper">
    <video id="v" src="video.mp4" controls></video>
</div>

Getting video element using jQuery:

   var v = $("#v");

Check if video is ready to play:

  $(v).on('canplay', function(){
      $(v).mouseenter(function(){
         $(this).get(0).play();
      }).mouseleave(function(){
         $(this).get(0).pause();
      })
   });

How to pause a video when mouse is taken off?

2 Answers2