CODEWITHSUNDEEP
javascripthtmljquerycss
gjjr
gjjr

Reputation: 569

Pausing video after hover

I have the following code to make a video play on hover, but i need it to stop playing when not hovering. What do I need to add to the JS to make this work?

<div class="padding-box height-40">
                <div>
                    <div class="media_link_overlay" id="video-home"></div>
                </div>
                <div class="background">
                    <div class="content">
                        <div class="text">
                            <video id="video-hover" width="100%" height="100%" preload="auto" onMouseover="mouseoversound.playclip()">
                                 <source type="video/mp4" src="<?php echo get_template_directory_uri().'/videos/homepage_thx.mp4';?>" />
                            </video>
                        </div>
                    </div>      

<script>
$("#video-home").hover(function(){
    $("#video-home")[0].play();
});
</script>

Upvotes: 2

Views: 59

Answers (1)

palaѕн
palaѕн

Reputation: 73906

The .hover() method has two handler functions, one is handlerIn and other is handlerOut. Currently, you are only using the first handler. You can use both and make video play on hover-in and pause on hover-out like:

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
  }
);

If you want to completely stop the video and make it start from the beginning on next hover-in, you can use:

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
    $("#video-home")[0].currentTime = 0;
  }
);

Upvotes: 2

Related Questions