Sharing Playbar on Scroll

Pause playback when the player is out of view and allow viewers to control playback or share the page via an external playbar on scroll.

License: All
Player Version:
Author: Joshua Hatcher | GitHub
This demo includes:
  • play()
  • on('play')
  • on('pause')
  • on('complete')
  • on('playlistItem')

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vehicula eleifend. Praesent vel diam venenatis, placerat lectus ac, interdum tellus. Vestibulum sed velit feugiat, euismod magna sed, hendrerit justo. Integer rutrum id risus et commodo. Vestibulum vitae facilisis mauris, a fermentum leo. Nam eu pulvinar velit. Quisque et ex malesuada, hendrerit orci vitae, luctus dolor. In hac habitasse platea dictumst. In non interdum enim, eget porta sem. Aliquam eu nunc facilisis, ullamcorper sem eu, porttitor mi. Quisque pharetra vestibulum nulla vel tempor. In hac habitasse platea dictumst.

Etiam condimentum ex nisi, pretium facilisis ex ultrices venenatis. Donec facilisis iaculis velit, ut pulvinar sem. Curabitur vulputate interdum risus varius volutpat. Mauris rutrum lectus bibendum malesuada gravida. Proin ac massa dapibus, lacinia mi eu, sodales leo. In pharetra eros at arcu malesuada luctus. Praesent orci diam, pretium vitae justo dapibus, semper mollis nulla. Etiam eu ligula vitae libero tempor tincidunt. Aenean libero neque, condimentum sit amet nunc vitae, hendrerit tempus libero. Nullam et sapien condimentum sem euismod laoreet.

Cras volutpat velit aliquet eros eleifend imperdiet. Ut eu augue hendrerit, aliquam nisi id, laoreet dui. In malesuada commodo pulvinar. Curabitur non pulvinar felis. Morbi sed malesuada dui. Fusce ligula lacus, luctus porttitor sodales sed, bibendum ut est. Vestibulum quis tortor consectetur, feugiat tellus vel, molestie nisi. Vivamus a mauris sem. Nam molestie eros vulputate turpis ultrices, hendrerit porttitor lacus congue. Fusce ac convallis diam. Integer elementum odio sit amet justo tempor ullamcorper. Mauris egestas nibh justo, et maximus nulla vehicula in. Curabitur accumsan leo vulputate mauris elementum, eget lacinia augue viverra. Aenean consectetur vel lectus et dignissim.

Cras vulputate libero velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut imperdiet imperdiet ante, at commodo dolor dictum at. Phasellus luctus massa elit, finibus pretium magna interdum eget. Maecenas condimentum ex et efficitur iaculis. Duis porttitor felis id erat imperdiet, sed malesuada eros feugiat. Proin aliquam magna diam, gravida iaculis nulla molestie sed. Fusce aliquam id leo at imperdiet. Etiam ut dictum nunc. Nullam vel neque ultricies, varius ligula ac, consequat turpis. Nunc euismod hendrerit felis, sed cursus velit placerat quis. Morbi vestibulum, metus varius feugiat vehicula, augue dolor pulvinar nisl, a rhoncus tellus turpis a ante. Aliquam condimentum orci quis nunc ullamcorper, eu lacinia metus hendrerit. Nullam laoreet sem massa, a eleifend justo rhoncus quis.

Donec tristique augue id hendrerit placerat. Vestibulum dignissim aliquet sem eget finibus. Nunc non tempor erat. Sed convallis purus vel massa pulvinar ullamcorper. Aenean hendrerit scelerisque hendrerit. Nam id tincidunt justo. Ut metus dui, commodo eu suscipit vel, tristique vitae augue. Pellentesque euismod rutrum lacus facilisis tempus. Sed pharetra ipsum metus, id facilisis sapien pharetra sed. Curabitur sodales elit pellentesque, pulvinar ante ac, commodo augue. Duis dolor lectus, rutrum ut congue ut, blandit a purus. Fusce commodo, ipsum id convallis luctus, tortor mauris fringilla est, at convallis metus mauris quis nisl.

<script type="text/javascript">

(function() {
  'use strict';

  var player;
  var scrollThreshold, scrollTimeout, ticking, lastThresholdCrossed, currentThresholdCrossed;
  var lastScrollHeight = 0;
  var banner = document.querySelector('.footer-banner');

  function init() {
    player = jwplayer('player').setup({
      playlist: '//cdn.jwplayer.com/v2/media/4yN3Zspm',
      autostart: true,
      mute: true
    }).on('ready', function() {
      // We will want to pause the video when it is only ten percent visible
      scrollThreshold = getBottomTenPercentDepth(document.getElementById('player'));
    })

    attachEvents(player);
  }

  function attachEvents(player) {
    player.on('playlistItem', function(e) {
      banner.querySelector('.video-title').innerHTML = e.item.title;
    });

    banner.querySelector('.playback-btn').addEventListener('click', togglePlaybackOnClick);

    player.on('pause', togglePlaybackDisplay.bind(null, 'add'));
    player.on('play', togglePlaybackDisplay.bind(null, 'remove'));
    player.on('complete', togglePlaybackDisplay.bind(null, 'add'));

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

  function togglePlaybackOnClick() {
    var isPaused = banner.classList.contains('is-paused');

    togglePlayback(isPaused);
  }

  function togglePlaybackDisplay(method) {
    banner.classList[method]('is-paused');
  }

  function onScroll() {
    if (scrollTimeout) {
      clearTimeout(scrollTimeout);
    }

    requestTick();

    scrollTimeout = setTimeout(function() {
      ticking = cancelAnimationFrame(ticking);
      lastScrollHeight = window.pageYOffset;
    }, 100);
  }

  function requestTick() {
    if (!ticking) {
      ticking = requestAnimationFrame(update);
    }
  }

  function update() {
    toggleBanner();
    togglePlaybackOnScroll();

    ticking = requestAnimationFrame(update);
  }

  function toggleBanner() {
    if (lastScrollHeight <= window.pageYOffset) {
      banner.classList.add('is-visible');
    } else {
      banner.classList.remove('is-visible');
    }
  }

  function togglePlaybackOnScroll() {
    lastThresholdCrossed = lastScrollHeight > scrollThreshold;
    currentThresholdCrossed = window.pageYOffset > scrollThreshold;

    if (lastThresholdCrossed !== currentThresholdCrossed) {
      // If user has scrolled beyond the threshold set, pause the video; otherwise play.
      togglePlayback(!currentThresholdCrossed);
    }
  }

  function togglePlayback(triggerPlay) {
    if (triggerPlay) {
      player.play();
    } else {
      player.pause();
    }
  }

  function getBottomTenPercentDepth(element) {
    var elementYOffset = 0;
    var ninetyPercentElementHeight = element.offsetHeight * 0.9;

    while (element) {
      elementYOffset += element.offsetTop;
      element = element.offsetParent;
    }

    return elementYOffset + ninetyPercentElementHeight;
  }

  init();
}());

</script>
Please Note: This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.