Skip to content

Instantly share code, notes, and snippets.

@dermotmcguire

dermotmcguire/Video API Interactive Showcase.markdown

Created November 30, 2015 23:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dermotmcguire/15756d14101f0d3d6c5c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dermotmcguire/15756d14101f0d3d6c5c to your computer and use it in GitHub Desktop.
Download ZIP
Video API Interactive Showcase
Raw
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>
Raw
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();
}
});
})();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment