Pause/play video when video is in the center of the viewport JWPlayer

Question

I am trying to Pause/play different videos once each reach the centre of the viewport, then pause them once you scroll away from them.

I am using JWPlayer but I am having issues pausing all the other videos on the page and keeping the current one playing that visible in the viewport.

https://jsfiddle.net/vv7jbrv6/1/

function onScrollVideo() {
   updateVideo();
}

function updateVideo() {

  var windowHeight = $(window).height(),

  gridTop = 200,
  gridBottom = 1000;

  $('.jwplayer').each(function() {
    var thisTop = $(this).offset().top - $(window).scrollTop(),
    playerID = $(this).prop('id');

    if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
     jwplayer(playerID).play();

    } else {
     jwplayer(playerID).on('pause');

    }

  });

}
window.addEventListener('scroll', onScrollVideo, false);

Here's my similar question discussing various ways to play html5 video when in viewport... but I think your problem is with the jwplayer API. http://stackoverflow.com/questions/21163756/html5-and-javascript-to-play-videos-only-when-visible/40011508#40011508 — UltrasoundJelly, Nov 03 '16 at 14:59

score 1 · Answer 1 · answered Nov 03 '16 at 15:02

1

  jwplayer(playerID).pause(true);

JSfiddle

answered Nov 03 '16 at 15:02

UltrasoundJelly

1,845
2
18
32

any success here? – UltrasoundJelly Nov 04 '16 at 00:33
They dont seem to start playing again once you scroll back up to them https://jsfiddle.net/vv7jbrv6/4/ – Bowen Nov 04 '16 at 15:06
looks like you're never getting into your `$('.jwplayer').each(function() {` loop. – UltrasoundJelly Nov 04 '16 at 15:32

Pause/play video when video is in the center of the viewport JWPlayer

1 Answers1