github.com/outbrain/consul@v1.4.5/website/source/assets/javascripts/consul-connect/home-hero.js (about)

     1  var qs = document.querySelector.bind(document)
     2  var qsa = document.querySelectorAll.bind(document)
     3  
     4  var $$wrappers = qsa('#home-hero .videos > div') // all the wrappers for the videos
     5  var $$videos = qsa('#home-hero video') // all the videos
     6  var $$videoControls = qsa('#home-hero .controls > div') // carousel controllers
     7  var currentIndex = 1 // currently playing video
     8  var playbackRate = 2 // video playback speed
     9  
    10  // initiate a video change
    11  function initiateVideoChange(index) {
    12    var wrapper = $$wrappers[currentIndex]
    13    var nextWrapper = $$wrappers[index]
    14  
    15    // pause the current video
    16    $$videos[currentIndex].pause()
    17  
    18    // deactivate the current video
    19    wrapper.classList.remove('active')
    20    wrapper.classList.add('deactivate')
    21  
    22    // after the current video animates out...
    23    setTimeout(function() {
    24      // remove transition effect so progress-bar doesn't slowly decline
    25      var loadingBar = $$videoControls[currentIndex].querySelector(
    26        '.progress-bar span'
    27      )
    28      loadingBar.style.transitionDuration = '0s'
    29  
    30      // reset the current video
    31      if (!isNaN($$videos[currentIndex].duration)) {
    32        $$videos[currentIndex].currentTime = 0
    33      }
    34      $$videoControls[currentIndex].classList.remove('playing')
    35  
    36      // stop deactivation
    37      wrapper.classList.remove('deactivate')
    38  
    39      // check if the video is loaded
    40      // if not, listen for it to load
    41      if ($$videos[index].classList.contains('loaded')) {
    42        playVideo(index, nextWrapper)
    43      } else {
    44        $$videos[index].addEventListener(
    45          'canplaythrough',
    46          playVideo(index, nextWrapper)
    47        )
    48      }
    49    }, 1000)
    50  }
    51  
    52  // activate and play a video
    53  function playVideo(index, wrapper) {
    54    // toggle
    55    $$videos[index].classList.add('loaded')
    56  
    57    // activate the next video and start playing it
    58    wrapper.classList.add('active')
    59    $$videoControls[index].classList.add('playing')
    60    $$videos[index].play()
    61  
    62    $$videoControls[index].querySelector(
    63      '.progress-bar span'
    64    ).style.transitionDuration =
    65      Math.ceil($$videos[index].duration / playbackRate).toString() + 's'
    66  
    67    // set the currentIndex to be that of the current video's index
    68    currentIndex = index
    69  }
    70  
    71  function initiateVideos() {
    72    // remove 'active' from wrappers which may be 
    73    // there on page load because of turbolinks
    74    for (var i = 0; i < $$wrappers.length; i++) {
    75      $$wrappers[i].classList.remove('active')
    76    }
    77  
    78    // loop through videos to set up options/listeners
    79    for (var i = 0; i < $$videos.length; i++) {
    80      // set video default speed
    81      $$videos[i].playbackRate = playbackRate
    82  
    83      // listen for video ending, then go to the next video
    84      $$videos[i].addEventListener('ended', function() {
    85        var nextIndex = currentIndex + 1
    86        initiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
    87      })
    88    }
    89  
    90    for (var i = 0; i < $$videoControls.length; i++) {
    91      // remove 'playing' from controls which may be 
    92      // there on page load because of turbolinks
    93      $$videoControls[i].classList.remove('playing')
    94  
    95      // listen for control clicks and initiate videos appropriately
    96      $$videoControls[i].addEventListener('click', function() {
    97        if (!this.classList.contains('playing')) {
    98          initiateVideoChange(this.dataset.index)
    99        }
   100      })
   101    }
   102  
   103    // go to first video to start this thing
   104    if ($$videos.length > 0) {
   105      initiateVideoChange(0)
   106    }
   107  }
   108  
   109  document.addEventListener('turbolinks:load', initiateVideos)