不在视野范围内时暂停 HTML5 视频

Question

我已经使用slick slider--a fiddle can be viewed here-- 构建了一个带有图像和 html5 视频的多媒体滑块，我正在尝试找到一种方法来自动暂停任何可能正在播放但在滑块，即那些不在视线范围内的滑块。因此，如果观看者单击要播放的视频，然后在滑块中前进，则该视频将依次暂停，因此不能同时播放两个视频。

Slick 滑块将 .slick-active 类附加到当前视图中的所有幻灯片，所以我想我需要隔离（可能通过 jQuery）所有包含 没有 有 @ 的视频的幻灯片987654326@类应用，并确保停止视频播放？

我发现了一个有用的 SO 线程 here，它描述了使用 getElementsByClassName 在未激活的滑块中选择视频内容，但是我不能使用与 slick 滑块相同的方法，目前仅向这些帧添加类在视图中。

如何使用 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();
      }
    });
  });
});