CODEWITHSUNDEEP
jqueryhtmlvideo
Andrew
Andrew

Reputation: 1121

Auto Pause or Play HTML5 Video on Hover

I am trying to program a section of a page that has three buttons. Each button should fade out the current video and begin to play video associated with that button. That video should play until you click on another button at which time it fades out and pauses and the new video fades in and begins to play. I have the fadeIn/fadeOut all in place, but am having some issue hooking up the pause and play functionality. Any ideas?

Here is the jQuery I have so far:

$('.hover-text div[class^="slide"]').hover(
    function () {
        if (!$(this).hasClass('current')) {
          $('.slides div').fadeOut();
        };
        var class = $(this).attr('class');
        $('.slides div.' + class).fadeIn('slow');
        $('div[class^="slide"]').removeClass('current');
        $(this).addClass('current');

    },
    function () {

    }
);

I found this tutorial, but I am not sure how to incorporate that code into mine.

Upvotes: 3

Views: 5760

Answers (1)

Adam Merrifield
Adam Merrifield

Reputation: 10407

Is this what you're looking for? http://jsfiddle.net/pNbYq/4/

$('#button-holder a').hover(function(){
    var that = $(this);
    if(!$('#'+that.data('video')).is(':visible')){
        $('video:visible')[0].pause();
        $('video:visible').fadeOut('normal', function(){
            $('#'+that.data('video')).fadeIn('normal', function(){
                $('#'+that.data('video'))[0].play();
            });
        });
    }else{
        $('#'+that.data('video'))[0].play();
    }
}, function(){
    $('video:visible')[0].pause();
});

Upvotes: 3

Related Questions