2013-03-21 234 views
3

我试图编程一个页面有三个按钮的部分。每个按钮都应该淡出当前视频并开始播放与该按钮相关的视频。该视频应播放,直到您点击另一个按钮,此时它会淡出并暂停,并且新视频淡入并开始播放。我有fadeIn/fadeOut全部到位,但有一些问题挂钩了暂停和播放功能。有任何想法吗?自动暂停或播放悬停的HTML5视频

这里是jQuery的我到目前为止:

$('.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() { 

    } 
); 

我发现this tutorial,但我不知道如何将这些代码到矿井。

回答

3

这是你在找什么? 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(); 
}); 
+0

关闭。我确实希望视频播放并暂停播放,所以不需要点击。视频应该继续播放,直到您将鼠标悬停在另一个按钮上。谢谢! – Andrew 2013-03-21 21:11:21

+0

关于如何做到这一点的任何建议?非常感谢您的帮助@Adam! – Andrew 2013-03-21 21:42:28

+0

@Andrew我更新了代码和演示。让我知道,如果这就是你要找的。 – 2013-03-22 01:18:12