hover时自动暂停或播放HTML5video

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

这是我到目前为止的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 () { } ); 

我找到了本教程 ，但我不确定如何将该代码合并到我的中。

Answer 1

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