Question

190

Video play on hover

rated 0 times [ 194] [ 4] / answers: 1 / hits: 56295 / 10 Years ago, thu, november 6, 2014, 12:00:00

I have a selection of video thumbnails that I want to trigger to play/pause on hover. I have managed to get one of them to work, but I run into a problem with the others on the list. Attached is the fiddle of my code. There will be a div covering each html5 video so the hover needs to delegate to the video, which I'm unsure as to how to do.

https://jsfiddle.net/meh1aL74/

Preview of the html here -

<div class="video">

            <div class="videoListCopy">

                <a href="videodetail.html" class="buttonMore">

                        <div class="breaker"><div class="line"></div></div>

                        <div class="buttonContent">

                            <div class="linkArrowContainer">

                                <div class="iconArrowRight"></div>

                                <div class="iconArrowRightTwo"></div>

                            </div>

                            <span>Others</span>

                        </div>

                    </a>

            </div>

            <div class="videoSlate">

                <video class="thevideo" loop>

                  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">

                Your browser does not support the video tag.

                </video>

            </div>

        </div>

         

         

          <div class="video">

            <div class="videoListCopy">

                <a href="videodetail.html" class="buttonMore">

                        <div class="breaker"><div class="line"></div></div>

                        <div class="buttonContent">

                            <div class="linkArrowContainer">

                                <div class="iconArrowRight"></div>

                                <div class="iconArrowRightTwo"></div>

                            </div>

                            <span>Others</span>

                        </div>

                    </a>

            </div>

            <div class="videoSlate">

                <video class="thevideo" loop>

                  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">

                Your browser does not support the video tag.

                </video>

            </div>

        </div>

Preview of the JavaScript here -

    var figure = $(".video");

    var vid = $("video");



    [].forEach.call(figure, function (item) {

            item.addEventListener('mouseover', hoverVideo, false);

            item.addEventListener('mouseout', hideVideo, false);

    });

    

    function hoverVideo(e) {  

            $('.thevideo')[0].play(); 

    }



    function hideVideo(e) {

            $('.thevideo')[0].pause(); 

    }

Thank you very much for your help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 10 Years ago saiget · Accepted Answer

Why are you uisng native event binding together with jQuery ?

Anyway, if you want to handle the events natively you can use the .bind method and pass the index of each video to the handlers

var figure = $(.video);

var vid = figure.find(video);



[].forEach.call(figure, function (item,index) {

    item.addEventListener('mouseover', hoverVideo.bind(item,index), false);

    item.addEventListener('mouseout', hideVideo.bind(item,index), false);

});



function hoverVideo(index, e) {

    vid[index].play(); 

}



function hideVideo(index, e) {

    vid[index].pause(); 

}

Demo at http://jsfiddle.net/gaby/0o8tt2z8/2/

Or you can go full jQuery

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



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

function hideVideo(e) { $('video', this).get(0).pause(); }

Demo at http://jsfiddle.net/gaby/0o8tt2z8/1/