Load Video on Scroll

In this example below you will see how to do a Load Video on Scroll with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Load Video on Scroll</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body data-ng-app="app">
  <div class="video-container" data-ng-controller="VidCtrl">
    {{currentVid}}
    <video class="video-one">
      <source src="http://techslides.com/demos/samples/sample.mp4" type="video/mp4">
    </video>
    <video class="video-two">
      <source src="" />
    </video>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/load-video-on-scroll-GjYdmd */
body {
  overflow: hidden;
}

.video-container {
  position: absolute;
  height: 100%;
  width: 100%;
}
.video-container video {
  position: absolute;
  height: 100%;
  width: 100%;
}
.video-container .video-two {
  margin-top: 100%;
}


/*Downloaded from https://www.codeseek.co/007design/load-video-on-scroll-GjYdmd */
angular.module('app', [])
.controller('VidCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  var videoOne = $('.video-one');
  var videoTwo = $('.video-two');
  var keys = {37: 1, 38: 1, 39: 1, 40: 1};
  var vids = [
    'http://techslides.com/demos/samples/sample.mp4',
    'https://www.w3schools.com/tags/mov_bbb.mp4',
    'https://www.w3schools.com/tags/movie.mp4'
  ];
  
  $scope.currentVid = 0;
  $scope.currentContainer = 1;
  
  function doScrollKeys(e) {
    if (keys[e.keyCode]) {
      doScroll(e);
      return false;
    }
  }
  
  function loadNextVid() {
    console.log('loadNextVid');
    var container = $scope.currentContainer === 1 ? videoOne : videoTwo;
    container.find('source').attr('src', vids[$scope.currentVid]);
    container.css('margin-top', '100%');
    container[0].load();
  }
  
  function playNextVid() {
    console.log('playNextVid');
    var current = $scope.currentContainer === 1 ? videoOne : videoTwo;
    var next = $scope.currentContainer === 1 ? videoTwo : videoOne;
    $scope.currentVid = $scope.currentVid + 1 >= vids.length ? 0 : $scope.currentVid + 1;
    $scope.currentContainer = $scope.currentContainer === 1 ? 2 : 1;
    current[0].play();
    $scope.canScroll = false;
    $scope.$apply();
  }
  
  function doScroll(e) {
    e.preventDefault();
    console.log($scope.canScroll);
    if ($scope.canScroll) {
      $scope.canScroll = false;
      var current = $scope.currentContainer === 1 ? videoOne : videoTwo;
      var next = $scope.currentContainer === 1 ? videoTwo : videoOne;
      current.animate({'margin-top': '0'},300);
      next.animate({'margin-top': '-100%'},500, function() {
        next.css('margin-top', '100%');
        loadNextVid();
      });
      playNextVid();
    }
    $scope.$apply();
  }
    
  $(window).on('scroll', doScroll);
  window.onwheel = doScroll; // modern standard
  window.onmousewheel = document.onmousewheel = doScroll; // older browsers
  window.ontouchmove = doScroll; // mobile
  document.onkeydown = doScrollKeys;
  
  $timeout(function() {
    playNextVid();
    loadNextVid();
  });
  
  videoOne.on('ended', function() {
    $scope.canScroll = true;
    $scope.$apply();
  });
  videoTwo.on('ended', function() {
    $scope.canScroll = true;
    $scope.$apply();
  });
}])

Comments