CODEWITHSUNDEEP
jqueryvideo
Shelby
Shelby

Reputation: 43

jQuery - Play video when hover on parent div

I'm creating a video gallery consisting of thumbnails that play a short video on hover. I've been able to get them to play while hovering over the video itself, but I need them to play when hovering on the video's parent div. Here's my attempt so far:

HTML:

<div class="thumbail">
<video preload="auto" loop>
    <source src="videos/movie.webm" type="video/webm">
    <source src="videos/movie.mp4" type="video/mp4">
    <source src="videos/movie.ogv" type="video/ogg">
</video>
</div>

JavaScript:

$(document).ready(function(){
$(".thumbnail").hover(
function() {
    $(this).children("video").play();
}, function() {
    $(this).children("video").pause();
    $(this).children("video").currentTime = 0;
});
});

Can't figure out what it is I'm doing wrong. Any help would be greatly appreciated. :)

Upvotes: 4

Views: 21017

Answers (4)

Gauravbhai Daxini
Gauravbhai Daxini

Reputation: 2190

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}
#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Data: https://gfycat.com/cajax/get/VerifiableTerrificHind
 
Source: https://www.youtube.com/watch?v=nZcejtAwxz4

More info on youtube api for thumbnails: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
-->
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>

Upvotes: 0

collyg
collyg

Reputation: 181

This is a simply awesome answer, and my thanks to you for the solution Aron

Here is some code that I implemented to augment the functionality a little, and my explanation follows:

    <script type = "text/javascript">

    $(document).ready(function () {
        $("#video").css("display", "none"); //HIDE THE VIDEO INITIALLY
        $(".thumbnail").hover(function () 
                {
                $("#video").css("display", "block"); //SHOW THE VIDEO ON HOVER
                    $(this).children("video")[0].play();
                }, 

        function () {
            var el = $(this).children("video")[0];
            el.pause();
            el.currentTime = 0;
        });
    });
</script>

The following hides the video on page load:

$("#video01").css("display", "none");

Once the user hovers over the video casing the following fades it in:

$("#video01").css("display", "block");

where #video is the id of the video tag i.e. :

<video id = "video">

Mine is implemented here.

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element. 

$(document).ready(function(){
  $(".thumbnail").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();
        $(this).children("video").get(0).currentTime = 0;
    });
});

Note: get use for getting the native DOM element from the jQuery selection.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

The method pay and pause belongs to the dom element(video object), not the jquery object so 

$(document).ready(function () {
    $(".thumbnail").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
        el.currentTime = 0;
    });
});

$(this).children("video") returns a jQuery object which does not have the pay/pause methods so your code should through an error(unless you have included some plugins which adds those methods).

You can access the underlying dom element by using the index of the child like $(this).children("video")[0] then call those methods on that element.

Upvotes: 7

Related Questions