將HTML5視頻暫停視圖

Question

我已經使用slick slider - a fiddle can be viewed here構建了一個帶圖像和html5視頻的多媒體滑塊 - 並且我試圖找到一種方法來自動暫停可能正在播放的視頻在滑塊中活動，即那些不在視圖中的滑塊。因此，如果觀看者點擊要播放的視頻，然後通過滑塊前進，該視頻將暫停，因此不能同時播放兩個視頻。

油滑滑塊追加一類的.slick-active當前視圖中的所有幻燈片，所以我想我需要隔離（通過jQuery也許）包含視頻所有的幻燈片不已經應用了.slick-active類，並確保視頻播放已停止？

我發現了一個有益的SO線程here，描述使用getElementsByClassName以選擇一個滑塊處於非活動狀態的視頻內容，但是我不能採用此相同的方法，光滑滑動件僅添加類到這些幀目前鑑於。

我該如何使用jQuery來選擇合適的幻燈片並停止任何活動回放？在此先感謝您的幫助。

Answer 1

您需要確定視頻是否正在播放。如果是這樣，然後鉤入滑動滑塊beforeChange事件以暫停視頻。

$(document).ready(function() { 
 
    $('.slider').addClass("loaded"); 
 
    $('.slider').slick({ 
 
    dots: true, 
 
    infinite: true, 
 
    speed: 200, 
 
    slidesToShow: 7, 
 
    dots: true, 
 
    lazyLoad: 'ondemand', 
 
    variableWidth: true 
 
    }); 
 
    $("video").click(function(e) { 
 
    // get click position 
 
    var clickY = (e.pageY - $(this).offset().top); 
 
    var height = parseFloat($(this).height()); 
 
    var self = this; 
 

 
    // avoids interference with controls 
 
    if (clickY > 0.82 * height) return; 
 

 
    // toggles play/pause 
 
    self.paused ? self.play() : self.pause(); 
 
    $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) { 
 
     if (!self.paused) { 
 
     self.pause(); 
 
     } 
 
    }); 
 
    }); 
 
});