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

Question

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

Slick 滑块将 .slick-active 的 class 附加到当前查看的所有幻灯片，所以我想我需要隔离（可能通过 jQuery）所有包含视频的幻灯片不应用.slick-activeclass，确保视频播放停止？

我找到了一个有用的 SO 线程 here，它描述了在不活动的滑块中使用 getElementsByClassName 到 select 视频内容，但是我不能使用相同的方法因为光滑的滑块只会将 classes 添加到当前 在视图 中的那些帧。

我如何使用 jQuery 来 select 适当的幻灯片并停止任何活动播放？在此先感谢您提供的任何帮助。

Answer 1

您需要确定视频是否正在播放。如果是这样，则挂接到 slick slider 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();
      }
    });
  });
});

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

Pause HTML5 video when out of view

javascript

jquery

html

video

html5-video