CODEWITHSUNDEEP
htmlcsshtml5-video
Mr.Fury
Mr.Fury

Reputation: 17

How to pause a video when mouse is taken off?

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 ?

Upvotes: 1

Views: 99

Answers (2)

Aftab Muni
Aftab Muni

Reputation: 171

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

Upvotes: 0

Peter Graham
Peter Graham

Reputation: 2575

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.

Upvotes: 1

Related Questions