将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(); 
 
     } 
 
    }); 
 
    }); 
 
});