自動暫停或播放懸停的HTML5視頻

我試圖編程一個頁面有三個按鈕的部分。每個按鈕都應該淡出當前視頻並開始播放與該按鈕相關的視頻。該視頻應播放，直到您點擊另一個按鈕，此時它會淡出並暫停，並且新視頻淡入並開始播放。我有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，但我不知道如何將這些代碼到礦井。

來源

2013-03-21 Andrew

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

來源

2013-03-21 20:05:02

關閉。我確實希望視頻播放並暫停播放，所以不需要點擊。視頻應該繼續播放，直到您將鼠標懸停在另一個按鈕上。謝謝！ – Andrew 2013-03-21 21:11:21

關於如何做到這一點的任何建議？非常感謝您的幫助@Adam！ – Andrew 2013-03-21 21:42:28

@Andrew我更新了代碼和演示。讓我知道，如果這就是你要找的。 – 2013-03-22 01:18:12

自動暫停或播放懸停的HTML5視頻

回答

相關問題