悬停时自动暂停或播放HTML5视频 [英] Auto Pause or Play HTML5 Video on Hover

问题描述

我正在尝试编写一个包含三个按钮的页面的一部分。每个按钮都应淡出当前视频并开始播放与该按钮相关的视频。该视频应播放，直到您点击另一个按钮，此时它会淡出并暂停，新视频会淡入并开始播放。我有fadeIn / fadeOut到位，但我有一些问题挂钩暂停和播放功能。有什么想法吗？

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?

这是我到目前为止的jQuery：

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.

推荐答案

这是你要找的吗？ 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();
});

这篇关于悬停时自动暂停或播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！