Video API Interactive Showcase

index.html

<article class="page">
  <article class="main">
    <div class="video-wrapper" id="video-container">

      <!--first video-->
      <div class="video-container">
        <div class="progress-bar">
          <div class="progress">
            <div class="progress-inner">
              <span class="progress-time"></span>
              <span class="progress-value"></span>
            </div>
          </div>
          <div class="buffer"></div>'
        </div>
        <div class="progress-overlay"></div>
        <video preload="none">
          <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/video1.mp4" type="video/mp4">
        </video>
        <div class="overlay"></div>
        <div class="caption">
          <h1 data-animation-percent="10">Amazing New Adventures</h1>
          <h3 data-animation-percent="20">Come and visit new parts of the world</h3>
          <p data-animation-percent="40"> Dont wait, there is a wide world out there that you can explore! contact us to see what we can do</p>
          <div class="readmore" data-animation-percent="60">Find out more</div>
        </div>
      </div>

      <!--second video-->
      <div class="video-container">
        <div class="progress-bar">
          <div class="progress">
            <div class="progress-inner">
              <span class="progress-time"></span>
              <span class="progress-value"></span>
            </div>
          </div>
          <div class="buffer"></div>
        </div>
        <div class="progress-overlay"></div>
        <video preload="none">
          <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/video2.mp4" type="video/mp4">
        </video>
        <div class="overlay"></div>
        <div class="caption">
          <h1 data-animation-percent="15">Places for you to visit</h1>
          <p data-animation-percent="30"> There are several great places that you can visit. You should contact us to see the type of adventure we can organise</p>
          <div class="readmore" data-animation-percent="50">Find out more</div>
        </div>
      </div>

      <!--third video-->
      <div class="video-container">
        <div class="progress-bar">
          <div class="progress">
            <div class="progress-inner">
              <span class="progress-time"></span>
              <span class="progress-value"></span>
            </div>
          </div>
          <div class="buffer"></div>
        </div>
        <video preload="none">
          <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/video3.mp4" type="video/mp4">
        </video>
        <div class="overlay"></div>
        <div class="caption">
          <h1 data-animation-percent="20">Diverse Range of Activities</h1>
          <div class="readmore" data-animation-percent="25">Text</div>
        </div>
      </div>

      <!--Fallback-->
      <div class="fallback-container">
        <div class="image"></div>
        <div class="overlay"></div>
        <div class="caption">
          <h1 data-animation-percent="15">This is a title</h1>
          <h3 data-animation-percent="25">Fallback when you dont support autoplay!</h3>
          <p data-animation-percent="50">Come and see a wide range of tasks and activties</p>
          <div class="readmore" data-animation-percent="70">Act now!</div>
        </div>
      </div>

    </div>

  </article>
</article>

script.js

(function(){
  'use strict';

  var mobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|IEMobile/i);
  if(!mobile){
    startVideoBanner();
  } else {
    showFallback();
  }

  function showFallback(){
    var fallback = $('.video-wrapper .fallback-container'),
        fallbackElements = fallback.find('[data-animation-percent]'),
        currentTime = 0,
        animationDuration = 5000,
        timeInterval = 50;

    fallback.addClass('active');

    var fallbackInterval = setInterval(function(){
      currentTime = (parseInt(currentTime) + timeInterval);
      fallbackElements.each(function(){
        var animationPercent = parseInt($(this).attr('data-animation-percent'));
        if((currentTime / animationDuration * 100) >= animationPercent){
          $(this).addClass('active');
        } else {
          $(this).removeClass('active');
        }
      });

      if(fallbackElements.filter('.active').length !== 0){
        fallbackElements.parents('.caption').addClass('active');
      }

      if(currentTime >= animationDuration){
        clearInterval(fallbackInterval);
      }

    }, timeInterval);
  }

  function startVideoBanner(){
    var videos = $('.video-container');

    videos.each(function(index){
      var video = $(this).find('video'),
          nextVideo;

      if(index !== (videos.length - 1)){
        nextVideo = $(this).next('.video-container').find('video');
      } else {
        nextVideo = videos.first().find('video');
      }

      if(index === 0){
        video.parents('.video-container').addClass('active');
        video[0].preload = 'auto';
        video[0].play();
      }

      var caption = video.siblings('.caption'),
          captionItems = caption.find('[data-animation-percent]'),
          videoBar = video.siblings('.progress-bar'),
          dragging = false,
          nextLoaded = false;

      $(video).on('timeupdate', function(){
        var videoTime = ((this.currentTime /  this.duration) * 100);

        if(captionItems.length > 0){
          captionItems.each(function(){
            var item = $(this);
            var animTime = parseInt(item.attr('data-animation-percent'));

            if(videoTime >= animTime){
              item.addClass('active');
            } else {
              item.removeClass('active');
            }
          });

          if(captionItems.filter('.active').length !== 0){
            caption.addClass('active');
          } else {
            caption.removeClass('active');
          }

          if(videoTime >= 90){
            caption.removeClass('active');

            captionItems.each(function(){
              $(this).removeClass('active');
            });
          }
        }

        if(videoTime >= 70 && nextLoaded === false){
          nextVideo.preload = 'auto';
          nextVideo.load();
          nextLoaded = true;
        }
      });

      function updateProgressAuto(video){
        var videoBar = $(video).siblings('.progress-bar');
        var videoPercent = ((video[0].currentTime / video[0].duration ) * 100);

        videoBar.find('.progress').css('width', videoPercent + '%');
        videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + ' : ' + parseFloat(video[0].duration).toFixed(2));
        videoBar.find('.progress-time').html(parseInt(videoPercent) + '%');
      }

      setInterval(function(){
        updateProgressAuto(video);
      }, 100);

      video[0].onended = function() {
        nextVideo.parents('.video-container').addClass('active');
        video.parents('.video-container').removeClass('active');
        nextVideo[0].play();
      };

      function updateProgressManual(progressBarPosition, video){
        var videoBar = $(video).siblings('.progress-bar');
        var videoPercentage = ((progressBarPosition / videoBar.outerWidth()) * 100);

        videoBar.find('.progress').css('width', videoPercentage + '%');
        videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + ' : ' + parseFloat(video[0].duration).toFixed(2));
        videoBar.find('.progress-time').html(parseInt(videoPercentage) + '%');
        video[0].currentTime = ((video[0].duration * videoPercentage) / 100);
      }

      videoBar.on('click', function(e){
        updateProgressManual((e.pageX - $(this).offset().left) , video);
      });

      videoBar.on('mousedown',function(e) {
        dragging = true;
        updateProgressManual(e.pageX - $(this).offset().left, video);
      });

      videoBar.on('mouseup',function(e) {
        dragging = false;
        updateProgressManual(e.pageX - $(this).offset().left, video);
      });

      videoBar.on('mousemove',function(e) {
        if(dragging === true){
          updateProgressManual(e.pageX - $(this).offset().left, video);
        }
      });

      videoBar.on('mouseover', function(){
        $(this).siblings('.progress-overlay').addClass('active');
        $(this).addClass('expanded');
        video[0].pause();
      });

      videoBar.on('mouseout', function(){
        $(this).siblings('.progress-overlay').removeClass('active');
        $(this).removeClass('expanded');
        video[0].play();
      });

      if(captionItems.length !==0){
        video.parents('.video-container').on('mouseover','.caption.active', function(){
          video[0].playbackRate = 0.5;
        });
        video.parents('.video-container').on('mouseout','.caption.active', function(){
          video[0].playbackRate = 1;
        });
      }
    });
  }
  
  $(".video-container").on("click", function(){
    var video = $(this).find("video")[0];
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  });

})();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  font-size: 110%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 150%;
}

.page {
  max-width: 1200px;
  margin: auto;
  padding: 25px 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  margin: 0.5rem 0rem 1.5rem 0rem;
  display: block;
}

h1 {
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

h3 {
  font-size: 125%;
}

h4 {
  font-size: 105%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

.video-wrapper .video-container,
.video-wrapper .fallback-container {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.video-wrapper .video-container video {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

.video-wrapper .video-container.active {
  display: block;
  position: relative;
  z-index: 2;
}

.controls {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  background: white;
}

.video-wrapper .overlay {
  position: absolute;
  z-index: 3;
  opacity: 0.7;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/overlay.png');
  background-repeat: repeat;
}

.video-wrapper .caption {
  position: absolute;
  top: 60px;
  left: 60px;
  color: #fff;
  max-width: 600px;
  z-index: 5;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  background: transparent;
  opacity: 0;
  padding: 15px;
}

.video-wrapper .caption.active {
  opacity: 1;
}

.video-wrapper .caption.active:hover,
.video-wrapper .caption.active:focus {
  background: rgba(255, 255, 255, 0.2);
}

.video-wrapper .caption * {
  opacity: 0;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
}

.video-wrapper .caption *.active {
  opacity: 1;
}

.video-wrapper .caption .readmore {
  border: solid 1px #fff;
  padding: 7px 15px;
  display: inline-block;
}

.progress-overlay {
  opacity: 0;
  background: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-transition: opacity linear 300ms;
  -moz-transition: opacity linear 300ms;
  -o-transition: opacity linear 300ms;
  transition: opacity linear 300ms;
}

.progress-overlay.active {
  opacity: 0.5;
  z-index: 7;
}

.progress-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 10px;
  background: rgba(25, 25, 25, 0.85);
  z-index: 10;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: width linear 700ms, height linear 300ms;
  -moz-transition: width linear 700ms, height linear 300ms;
  -o-transition: width linear 700ms, height linear 300ms;
  transition: width linear 700ms, height linear 300ms;
}

.progress-bar.active {
  opacity: 1;
}

.progress-bar.expanded {
  height: 30px;
}

.progress-bar .progress {
  background: #cc0033;
  height: 100%;
  position: absolute;
  width: 0%;
  top: 0px;
  left: 0px;
  opacity: 1;
  z-index: 2;
}

.progress-bar .buffer {
  background: #333;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  z-index: 1;
}

.progress-bar .progress .progress-inner {
  height: 100%;
  position: absolute;
  top: 0px;
  opacity: 0;
  right: 0px;
  overflow: hidden;
  color: #fff;
  -moz-transition: all 300ms linear;
}

.progress-bar.expanded .progress .progress-inner {
  opacity: 1;
}

.progress-bar.expanded .progress .progress-inner span {
  display: inline-block;
  margin-right: 25px;
  line-height: 30px;
  height: 30px;
}

.video-wrapper .fallback-container {
  display: none;
}

.video-wrapper .fallback-container.active {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 42%;
}

.video-wrapper .fallback-container .caption {
  opacity: 0;
  padding: 15px;
}

.video-wrapper .fallback-container .caption.active {
  background: rgba(25, 25, 25, 0.4);
  opacity: 1;
}

.video-wrapper .fallback-container .image {
  position: absolute;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/video_fallback.jpg');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 90%;
  }

  .video-wrapper .fallback-container.active {
    padding-bottom: 0px;
    height: auto;
  }

  .video-wrapper .fallback-container .caption {
    position: relative;
  }

  .video-wrapper .caption {
    padding: 10px;
    top: 0px;
    left: 0px;
  }

  .video-wrapper .caption h1 {
    font-size: 140%;
    margin: 0px 0px 15px 0px;
  }

  .video-wrapper .caption h2 {
    font-size: 120%;
    margin: 0px 0px 12px 0px;
  }

  .video-wrapper .caption h3 {
    font-size: 110%;
    margin: 0px 0px 17px 0px;
  }
}

Video API Interactive Showcase.markdown

Video API Interactive Showcase

Demo to accompany: http://www.sitepoint.com/interactive-video-showcase-video-api/

Forked from Simon Codrington's Pen Video API Interactive Showcase.

A Pen by Dermot McGuire on CodePen.

License.