Video play on hover

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.

http://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.

Oliver

Answers:

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/

Answer

Shortest version would be this one

<div>
    <video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
    <source src="yourVideo.ogg" type="video/ogg"></source>
    </video>    
</div>

This way it would be a bit cleaner, if you desire that.

Answer

The hoverVideo() function specifically calls for the first instance of .thevideo, so hovering over either one will play the first video.

You have to grab the element that the event occurred on, then find the .thevideo element within that element:

var figure = $(".video");
var vid = $("video");

[].forEach.call(figure, function (item) {
  item.addEventListener('mouseover', hoverVideo, false);
  item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e) {
  $(this).find('.thevideo')[0].play();
}

function hideVideo(e) {
  $(this).find('.thevideo')[0].pause();
}

Here's an updated fiddle: http://jsfiddle.net/52mxdbgy/1/

Answer

Your function explicitly asks for the first video: $('.thevideo')[0].play(); (first element in array).

Therefore, you need to (at least) pass the index of the video to which you bind the actions to ensure the right video gets played and paused.

For example:

$(document).ready(function() {       
    $('.video').each(function(i, obj) {
        $(this).on("mouseover", function() { hoverVideo(i); });
        $(this).on("mouseout", function() { hideVideo(i); });
    });
});

function hoverVideo(i) {  
    $('.thevideo')[i].play(); 
}

function hideVideo(i) {
    $('.thevideo')[i].pause(); 
}

Where I use jQuery's .on() method so all methods are jQuery (instead of a mix with JavaScript).

You can see this in action in the following jsFiddle:

DEMO

Answer

Here the same without jQuery and with a bit ES6. ;)

for(let tupel of document.querySelectorAll('video')) {
  tupel.addEventListener('mouseover', (e) => {
    e.target.play()
  }, false);

  tupel.addEventListener('mouseout', (e) => {
    e.target.pause()
  }, false);
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.