Jquery 自动暂停或悬停播放HTML5视频

我正在尝试编程一个有三个按钮的页面部分。每个按钮应淡出当前视频，并开始播放与该按钮相关的视频。该视频应一直播放，直到您单击另一个按钮，此时该视频淡出并暂停，新视频淡入并开始播放。我有fadeIn/fadeOut功能，但是在连接暂停和播放功能时遇到了一些问题。有什么想法吗

以下是我到目前为止的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 () {

    }
);

---

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

这就是您要找的吗

---

接近。实际上，我希望视频播放并暂停悬停，因此无需单击。视频应继续播放，直到您将鼠标悬停在另一个按钮上。谢谢关于如何做到这一点有什么建议吗？非常感谢你的帮助@Adam@Andrew我更新了代码和演示。如果你要找的就是这个，请告诉我。

$('#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();
});