CODEWITHSUNDEEP
javascriptjqueryhtmlvideohtml5-video
nickpish
nickpish

Reputation: 847

Pause HTML5 video when out of view

I've built a multimedia slider with images and html5 video using slick slider-- a fiddle can be viewed here-- and I'm trying to find a way to automatically pause any videos that might be playing that are not active in the slider, i.e. those that are out of view. Thus, if a viewer clicks a video to play, then progresses through the slider, that video will in turn pause, so no two videos can be playing at the same time.

Slick slider appends a class of .slick-active to all slides currently in view, so I'm thinking I need to isolate (via jQuery perhaps) all slides containing video that do not have the .slick-active class applied, and ensure that video playback is stopped?

I found a helpful SO thread here, that describes the use of getElementsByClassName to select video content in a slider that is not active, however I cannot employ this same method as slick slider only adds classes to those frames currently in view.

How might I use jQuery to select the appropriate slides and stop any active playback? Thanks in advance for any assistance here.

Upvotes: 1

Views: 1821

Answers (1)

colecmc
colecmc

Reputation: 3318

You need to determine if the video is playing or not. If so, then hook into the slick slider beforeChange event to pause the video.

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

Upvotes: 1

Related Questions