Question

我使用slick slider - a fiddle can be viewed here构建了一个带有图片和html5视频的多媒体滑块 - 我正试图找到一种方法来自动暂停任何可能正在播放的视频在滑块中不活动，即那些不在视野中的滑块。因此，如果观看者点击要播放的视频，然后通过滑块前进，该视频将暂停，因此不能同时播放两个视频。

Slick滑块将.slick-active类附加到当前视图中的所有幻灯片，因此我认为我需要隔离（通过jQuery）所有包含不的视频的幻灯片已应用.slick-active类，并确保停止播放视频？

我找到了一个有用的SO帖子here，它描述了使用getElementsByClassName选择未激活的滑块中的视频内容，但是我不能使用与光滑滑块相同的方法只添加类到当前在视图中的那些帧。

我如何使用jQuery选择合适的幻灯片并停止任何活动播放？在此提前感谢您的任何帮助。

Answer 1

您需要确定视频是否正在播放。如果是这样，那么请加入光滑的滑块beforeChange事件以暂停视频。

＆＃13;

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

＆＃13;

在视野之外暂停HTML5视频

1 个答案: