Video API Interactive Showcase

Developer
Simon Codrington
Size
6,047 Kb
Views
16,192
  1. Video API Interactive Showcase Previews
  2. Video API Interactive Showcase HTML Codes
  3. Video API Interactive Showcase CSS Codes
  4. Video API Interactive Showcase JS Codes

How do I make an video api interactive showcase?

What is a video api interactive showcase? How do you make a video api interactive showcase? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Video API Interactive Showcase Previews
IQ Test

Video API Interactive Showcase - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video API Interactive Showcase</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en">
<head> <meta charset="utf-8"> <title>Video API Showcase</title> <meta name="description" content="using the video API to trigger animation and interactions"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Simon Codrington"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'></link>
</head>
<body> <article class="page"> <header> <h1>Video Showcase</h1> <h3>Outlines how you can leverage the Video API to create an interactive video slider</h3> <p>If you want to read more about how this all works, please feel free to follow along on my SitePoint article </p> <h4>Notes</h4> <ul> <li>Tested and works in Chrome, FireFox, Opera and Safari. Partial support for IE <li>Currently images and videos are being pulled from Google Drive (which results in a small delay as the videos loads). When you have the resources locally or on a normal server the delay between video end to video play should be next to nothing</li> </ul> </header> <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://drive.google.com/uc?export=download&id=0B7UPM0QugWUjdFZ6d2Z3amFVZ2M" 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://drive.google.com/uc?export=download&id=0B7UPM0QugWUjYVB6LTFVV3hUeGs" 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://drive.google.com/uc?export=download&id=0B7UPM0QugWUjRV9wZ2M1djlKQ3M" 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> <footer></footer> </article>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Video API Interactive Showcase - Script Codes CSS Codes

/* * Video Styles */
/*generic styling*/
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%;
}
p{
}
/*Video styles*/
.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;
}
/*pattern overlay*/
.video-wrapper .overlay{	position: absolute;	z-index: 3;	opacity: 0.7;	top: 0px;	left: 0px;	width: 100%;	height: 100%;	background-image: url('https://drive.google.com/uc?export=download&id=0B7UPM0QugWUjYUNIRjN3a1VZZ00');	background-repeat: repeat;
}
/*video caption content*/
.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 (when we hover over the progres bar, fade it in)*/
.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 STUFF*/
.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*/
.progress-bar .progress{	background: #cc0033;	height: 100%;	position: absolute;	width: 0%;	top: 0px;	left: 0px;	opacity: 1;	z-index: 2;
}
/*buffer*/
.progress-bar .buffer{	background: #333;	height: 100%;	position: absolute;	top: 0px;	left: 0px;	width: 0%;	z-index: 1;
}
/*progress*/
.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 FALLBACK*/
.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://drive.google.com/uc?export=download&id=0B7UPM0QugWUjbzZETmRuUncyNTg');	width: 100%;	height: 100%;	background-size: cover;	background-position: center;	background-repeat: none;
}
/*Media queries for FANCINESS*/
/*DO we need this? Mobiles won't see the video elements anyway*/
@media screen and (max-width: 768px){	body{	font-size: 90%;	}	/*video fallbacks*/	.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 - Script Codes JS Codes

/* * Video Scripts and functionality */
//detect if we are on mobile (lets hope)
var mobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|IEMobile/i);
jQuery(document).ready(function($){	if(!mobile){	videos = $('.video-wrapper .video-container');	//process each video & animated elements	videos.each(function(index){	var video = $(this).find('video');	//get the next video element (either the next video or the first one if we are at the end)	if(index != (videos.length - 1)){	var nextVideo = $(this).next('.video-container').find('video');	}else{	var nextVideo = videos.first().find('video');	}	//on first video, preload	if(index === 0){	video.parents('.video-container').addClass('active');	video[0].preload = "auto";	video[0].play();	video[0].playbackRate = 1 ;	}	//find all of the caption elements to be animated in	var caption = video.siblings('.caption');	var captionItems = caption.find('[data-animation-percent]');	//if we have caption elements, slow playback on hover	if(captionItems.length !=0){	video.parents('.video-container').on('mouseover','.caption.active', function(event){	video[0].playbackRate = 0.5;	});	video.parents('.video-container').on('mouseout','.caption.active', function(event){	video[0].playbackRate = 1;	});	}	//interval to update the progress bar	videoInterval= setInterval(function(){	updateProgressAuto(video);	}, 100);	var videoBar = video.siblings('.progress-bar');	//When hovering over progress bar, pause video and restyle	videoBar.on('mouseover', function(){	$(this).siblings('.progress-overlay').addClass('active');	$(this).addClass('expanded');	video[0].pause();	});	//When not hovering, unpause video and restyle back to normal	videoBar.on('mouseout', function(){	$(this).siblings('.progress-overlay').removeClass('active');	$(this).removeClass('expanded');	video[0].play();	});	//seeking with the video bar	videoBar.on('click', function(e){	clearInterval(videoInterval);	updateProgressManual((e.pageX - $(this).offset().left) , video);	});	//mouse moving	var dragging = false;	videoBar.on('mousedown',function(e) {	clearInterval(videoInterval);	dragging = true;	updateProgressManual(e.pageX - $(this).offset().left, video);	});	//mouse up (choose time to seek to)	videoBar.on('mouseup',function(e) {	clearInterval(videoInterval);	dragging = false;	updateProgressManual(e.pageX - $(this).offset().left, video);	});	//mouse dragging (actively seeking)	videoBar.on('mousemove',function(e) {	if(dragging === true){	clearInterval(videoInterval);	updateProgressManual(e.pageX - $(this).offset().left, video);	}	});	//when video is playing	$(video).on('timeupdate', function(){	var videoTime = ((this.currentTime / this.duration) * 100);	//Fading in / out caption elements	if(captionItems.length > 0){	captionItems.each(function(){	item = $(this);	animTime = parseInt(item.attr('data-animation-percent'));	if(videoTime >= animTime){	item.addClass('active');	}else{	item.removeClass('active');	}	});	//set the caption (contains the elements) to be active so long as we have active elements	if(captionItems.filter('.active').length != 0){	caption.addClass('active');	}else{	caption.removeClass('active');	}	//check to see if we are about to finish and to fade out caption elements	if(videoTime >= 90){	caption.removeClass('active');	captionItems.each(function(){	$(this).removeClass('active');	});	}	}	//start loading the next video	if(videoTime >= 70){	nextVideo.preload = "auto";	}	});	//one end do cleanup	video[0].onended = function() { //change this video to be inactive and make the next active (so our video change is smooth) video.parents('.video-container').removeClass('active'); nextVideo.parents('.video-container').addClass('active'); nextVideo[0].play();	};	});	}	//ON mobile fallback to a single image and text	//(Similar to the video functionality, but completed with an interval)	else{	var fallback = $('.video-wrapper .fallback-container');	var fallbackElements = fallback.find('[data-animation-percent]');	fallback.addClass('active');	var currentTime = 0;	var animationDuration = 5000;	var timeInterval = 50;	//run our main interval timer (60 FPS hopefully)	var fallbackInterval = setInterval(function(){	currentTime = (parseInt(currentTime) + timeInterval);	//fade in elements based on time	fallbackElements.each(function(){	var animationPercent = parseInt($(this).attr('data-animation-percent'));	if((currentTime / animationDuration * 100) >= animationPercent){	$(this).addClass('active');	}else{	$(this).removeClass('active');	}	});	//if we have any caption elements faded in	if(fallbackElements.filter('.active').length != 0){	fallbackElements.parents('.caption').addClass('active');	}	//if we have ended, finish	if(currentTime >= animationDuration){	clearInterval(fallbackInterval);	}	}, timeInterval);	}	//Automatically updates the progress bar as we play	function updateProgressAuto(video){	//get current percent completion / time and update elements	var videoBar = $(video).siblings('.progress-bar');	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) + '%');	}	//Manually updates the video when we seek using the progress bar	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);	}
});
Video API Interactive Showcase - Script Codes
Video API Interactive Showcase - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 6,047 Kb
Views 16,192
Do you need developer help for Video API Interactive Showcase?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simon Codrington (simoncodrington) Script Codes
Name
CSS animations on scroll - Slide in from left
Mobile Navigation Menus - Scale from 0 to 1 open
Fancy Card Animation
Mobile Navigation Menus - Menu slide from left
CSS animations on scroll - Fade from bottom up
CSS Snap Scroll Points - Full Screen Scroller
Test iFrame
Stripe Header Grid
Foundation 6 Interchange
CSS Pulsating Sonar
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!