video.js

import scroll from './../lib/scrollListener'

const Velocity = require('velocity-animate')
require('velocity-ui')

const inViewport = el => {
 let rect = el.getBoundingClientRect()
 return (rect.top < rect.height) && (rect.top + rect.height > 0)
}

const merge = defaults => overwrites => {
  Object.keys(overwrites).forEach( val => {
    defaults[val] = overwrites[val]
  })
  return defaults
}

const testState = el => el.readyState == 4

const setSrc = el => el.setAttribute('src', el.getAttribute('data-src') )

const addClass = (cssClass, el) => el.classList.add(cssClass)

const fadeIn = el => {
  let innerEl = document.querySelector('.js-hero-inner')
  Velocity(el.parentNode, "fadeIn", {duration:2000, delay:500})
  Velocity(innerEl, "transition.slideUpIn", {duration: 1500})
}

export default (el, opts) => {
  const settings = merge({
    readyClass:'video-ready',
    parentEl:el.parentNode,
    autoload:true,
    fadeIn:fadeIn
  })(opts)

  let revealed = false
  let ready    = false
  let paused   = true

  let play = () => {
    if (ready && paused){
      paused = false
      el.play()
    } 
  }

  let pause = () => {
    if (!paused){
      paused = true
      el.pause()
    }
  }

  let setReady = (value) => {
    if (!value) return
    if ( inViewport(el) ) play(el)
    if (!revealed){
      revealed = true
      settings.fadeIn(el)
    }
    ready = value
  }

  //Add src immediately
  if (settings.autoload) setSrc(el)

  scroll( (y, prevY) => {
    if ( inViewport(el) ){
      if ( !el.getAttribute('src') ){
        setSrc(el)
      }
      play(el)
    } else {
      pause(el)
    }
  })

  ;['canplaythrough','canplay'].forEach( event => {
    el.addEventListener(event, () => {
      setReady( testState(el) )
    })
  })

  setReady( testState(el) )
}

A small module that automates the play and pause of videos based on scroll position of the user. If you need to simply play a video when it is in view of the user and pause it when not, this module is your guy!

Dependencies
This example uses the RAFScroll library to replace window.addEventListener('scroll', function(e) {.. native usage. Replace if you want a simple but less performant option. We also use the Velocity animation library to fade in the video. Again, replace this with another form of animation if you need!

Settings

1. readyClass (string)- Class attached to the parentEl when the video is ready to be played
2. parentEl (Node reference) - The parent of the video to add the readyClass to
3. autoload (boolean) - Do we want load the video immediately (on instantiation) or when the user scrolls to the video?
4. fadeIn (function) - The function to call when the video is ready to be played

Usage
InitScripts.js instantiation (no options supplied)

  <div class="video-wrap">
    <video data-src="{{ 'hero-video.mp4' | asset_url }}" width="100%" height="100%" class="hero__video" loop muted data-module="video"></video>
  </div>

Vanilla JS instantiation

import Video form '<./.../src>'

new Video( document.getElementById('Video'), {fadeIn:<function>} );