Interactive HTML5 Video Demo

Developer
Daniel Yuschick
Size
8,227 Kb
Views
12,144
  1. Interactive HTML5 Video Demo Previews
  2. Interactive HTML5 Video Demo HTML Codes
  3. Interactive HTML5 Video Demo CSS Codes
  4. Interactive HTML5 Video Demo JS Codes

How do I make an interactive html5 video demo?

This is a demo I put together for work to showcase some functionality types that can be used with HTML5 video. The video was shot quickly on a Droid Turbo.. What is a interactive html5 video demo? How do you make a interactive html5 video demo? This script and codes were developed by Daniel Yuschick on 25 September 2022, Sunday.

Interactive HTML5 Video Demo Previews
IQ Test

Interactive HTML5 Video Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive HTML5 Video Demo</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Interaction Points Begin at 1:15 -->
<div id="container"> <video id="the-video" poster="https://www.danyuschick.com/codepen/interactive-video/cover.jpg" preload="auto" controls> <source src="https://www.danyuschick.com/codepen/interactive-video/drink.mp4" type="video/mp4"> Your browser does not support the video tag... </video>
</div>
<div class="text-container"> <h1>Centerline Digital - Interactive Video Demo</h1> <h3>This video demonstrates three different interaction points that can be incorporated to create a dynamic, engaging experience.</h3>
</div>
<script id="network-connection" type="x-handlebars-template"> <div class="content-container network-connection"> <div class="selection-container"> <h2>Find and join a Wifi Network:</h2> <div class="network fake">DonatosPizzeria</div> <div class="network real">North.Street.Beer.Station</div> <div class="network fake">02Fitness_Seaboard</div> <div class="network fake">Kimbap_Restaurant</div> <p class="network-message"></p> </div> </div>
</script>
<script id="learn-more" type="x-handlebars-template"> <div class="content-container learn-more"> <div class="cta-container"> <div class="outerCircle"></div> <div class="middleCircle"> <div class="centerPin"></div> </div> </div> <div class="learn-more-container"> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, turpis efficitur porttitor placerat, felis est pulvinar quam, ac euismod ipsum libero a velit. Fusce velit sapien, cursus at tortor id, egestas egestas mauris. Fusce bibendum eros ac lobortis ultrices. Donec venenatis accumsan sem, id pulvinar leo blandit quis. Etiam sit amet metus gravida, iaculis tellus quis, elementum ex.</p> <a class="view-demo-button">Close [X]</a> </div> </div>
</script>
<script id="phone-call" type="x-handlebars-template"> <div class="content-container phone-call"> <div class="button answer">Answer the Call</div> <div class="button decline">Decline the Call</div> </div>
</script>
<script id="centerline-ending" type="x-handlebars-template"> <div class="content-container centerline-ending"> <img src="https://www.danyuschick.com/codepen/interactive-video/logo.png" alt="Centerline Digital" /> </div>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Interactive HTML5 Video Demo - Script Codes CSS Codes

/** ** Referencing this Pen: ** https://codepen.io/ksneaux/pen/jEXrLq ** By: Kyle Sneaux
**/
body { background-color: #fff; overflow-x: hidden; font-family: 'Open Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-backface-visibility: hidden; line-height: 1.25;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#container { position: relative; width: 1024px; height: 526px; margin: 25px auto 75px;
}
#container .content-container { position: absolute; top: 0; left: 0; z-index: 2; width: 1024px; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.7); -webkit-transition: opacity 1s, height 1s; -moz-transition: opacity 1s, height 1s; transition: opacity 1s, height 1s;
}
#container .content-container .selection-container { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; -webkit-transition: height 0.5s ease-in; -moz-transition: height 0.5s ease-in; transition: height 0.5s ease-in;
}
#container .content-container.active.network-connection { opacity: 1; height: 576px;
}
#container .content-container.active.network-connection .selection-container { position: absolute; padding: 0 25px; width: 700px; height: 300px; top: 50%; left: 50%; opacity: 1; margin: -150px 0 0 -350px; background: rgba(255, 255, 255, 0.9);
}
#container .content-container.active.network-connection .selection-container h2 { display: block; font-size: 25px; line-height: 30px;
}
#container .content-container.active.network-connection .selection-container .network { display: block; cursor: pointer; padding: 10px; background: #fff; font-size: 20px; -webkit-transition: background 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out;
}
#container .content-container.active.network-connection .selection-container .network:hover { background: #ccc;
}
#container .content-container.active.network-connection .selection-container .network.wrong { background: #c00; color: #fff;
}
#container .content-container.active.network-connection .selection-container .network.correct { background: #060; color: #fff;
}
#container .content-container.active.network-connection .selection-container p { display: block; text-align: center; font-size: 15px; line-height: 25px;
}
#container .content-container.active.network-connection .selection-container p.red { color: #c00;
}
#container .content-container.active.network-connection .selection-container p.green { color: #060;
}
#container .content-container.active.learn-more { opacity: 1; height: 576px; background: rgba(0, 0, 0, 0.5);
}
#container .content-container.active.learn-more .cta-container { width: 110px; height: 110px; position: absolute; left: 30%; top: 61%; margin: -55px 0 0 -55px; cursor: pointer;
}
#container .content-container.active.learn-more .outerCircle { background-color: transparent; border: 8px solid white; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 50%; width: 110px; height: 110px; margin: 0 auto; -moz-animation: spinCounterclockwise 2s infinite linear; -webkit-animation: spinCounterclockwise 2s infinite linear; animation: spinCounterclockwise 2s infinite linear;
}
#container .content-container.active.learn-more .middleCircle { background-color: transparent; border: 2px solid white; border-radius: 50%; top: -107px; width: 85px; height: 85px; margin: 0 auto; position: relative;
}
#container .content-container.active.learn-more .centerPin { border-top: 25px solid white; border-bottom: 25px solid white; border-left: 25px solid white; border-right: 25px solid white; border-radius: 50% 50% 50% 0; height: 0; width: 0; margin: 17px 0 0 17px; -moz-animation: spinClockwise 3s infinite linear; -webkit-animation: spinClockwise 3s infinite linear; animation: spinClockwise 3s infinite linear;
}
#container .content-container.active.learn-more .centerPin:after { background: #0a0; border-radius: 50%; content: ""; height: 35px; width: 35px; left: 50%; margin: -17px 0px 0px -18px; position: absolute; top: 50%;
}
@-moz-keyframes spinCounterclockwise { to { -moz-transform: rotate(0deg); } from { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spinCounterclockwise { to { -webkit-transform: rotate(0deg); } from { -webkit-transform: rotate(-360deg); }
}
@-o-keyframes spinCounterclockwise { to { -webkit-transform: rotate(0deg); } from { -webkit-transform: rotate(-360deg); }
}
@keyframes spinCounterclockwise { to { transform: rotate(0deg); } from { transform: rotate(-360deg); }
}
@-moz-keyframes spinClockwise { to { -moz-transform: rotate(0deg); } from { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spinClockwise { to { -webkit-transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); }
}
@-o-keyframes spinCounterclockwise { to { -webkit-transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); }
}
@keyframes spinClockwise { to { transform: rotate(0deg); } from { transform: rotate(360deg); }
}
#container .content-container.active.learn-more .learn-more-container { opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s;
}
#container .content-container.active.learn-more .learn-more-container.active { opacity: 1; position: absolute; top: 50%; left: 50%; width: 700px; height: 300px; margin: -150px 0 0 -350px; background: rgba(255, 255, 255, 0.95); padding: 25px;
}
#container .content-container.active.learn-more .learn-more-container.active p { font-size: 18px; line-height: 25px;
}
#container .content-container.active.learn-more .learn-more-container.active .view-demo-button { padding: 10px; text-align: center; background: #f63e28; color: #fff !important; margin: 25px 0; display: block; cursor: pointer; text-decoration: none;
}
#container .content-container.active.learn-more .learn-more-container.active .view-demo-button:visited, #container .content-container.active.learn-more .learn-more-container.active .view-demo-button:active { color: #fff;
}
#container .content-container.active.learn-more .learn-more-container.active .view-demo-button:hover { background: #f86a59;
}
#container .content-container.active.phone-call { opacity: 1; height: 576px; background: rgba(0, 0, 0, 0.5);
}
#container .content-container.active.phone-call .button { position: absolute; padding: 10px 20px; text-transform: uppercase; cursor: pointer;
}
#container .content-container.active.phone-call .button.answer { background: #0a0; color: #fff; font-weight: bold; top: 70%; left: 32%;
}
#container .content-container.active.phone-call .button.answer:after { content: ""; position: absolute; right: -20px; top: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #0a0;
}
#container .content-container.active.phone-call .button.decline { background: #600; color: #fff; font-weight: bold; top: 57%; left: 71%;
}
#container .content-container.active.phone-call .button.decline:before { content: ""; position: absolute; left: -20px; top: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #600;
}
#container .content-container.active.centerline-ending { opacity: 1; height: 576px; background: white;
}
#container .content-container.active.centerline-ending img { width: 500px; height: 78px; position: absolute; top: 50%; left: 50%; margin: -39px 0 0 -250px;
}
#container video { width: 100%; height: auto;
}
.text-container { width: 1026px; margin: 0 auto;
}
.text-container h1 { font-size: 24px; line-height: 35px; color: #003f69; border-bottom: 1px solid #666; text-transform: uppercase;
}
.text-container h3 { font-size: 18px; line-height: 25px; color: #666;
}

Interactive HTML5 Video Demo - Script Codes JS Codes

(function(window, document, $) { "use strict"; var theVideo = document.getElementById('the-video'), theFrameRate=30, theInteractionPoints=[2250,2625,2750,4270,4275], theIncrement="network-connection", isDeclined=false, theInstructions={ "reset": { headline: "Centerline Digital - Interactive Video Demo", description: "This video demonstrates three different interaction points that can be incorporated to create a dynamic, engaging experience." }, "network-connection": { headline: "Choose the correct network to continue", description: "Highlighting game-like interactions where progress is tied to a correct interaction." }, "learn-more": { headline: "Click to learn more about the transaction", description: "Using a call-to-action to display additional information about the scene." }, "phone-call": { headline: "Choose to accept or decline the call", description: "Displaying a choose-your-own-adventure interaction type to change the course of the experience" } }, theInterval; var theApp = { init: function() { theVideo.onplaying = function() { theApp.updateTheInstructions("reset"); theInterval = setInterval(function() { theTimingFunctions.getTheCurrentVideoFrame("play"); }, (1000 / theFrameRate)); }; theVideo.onpause = function() { clearInterval(theInterval); } theVideo.onseeked = function() { theTimingFunctions.getTheCurrentVideoFrame("seek"); } theVideo.onended = function() { theApp.buildHandlebarsTemplate("#centerline-ending", "#container", null); setTimeout(function() { theApp.resetTheVideo(); }, 2000); } }, updateTheInstructions: function(theScene) { var theHeadline = $(".text-container h1"), theDescription = $(".text-container h3"); $(theHeadline).text(theInstructions[theScene]["headline"]); $(theDescription).text(theInstructions[theScene]["description"]); }, buildHandlebarsTemplate: function(theSceneTemplate, theTarget, theValues) { var theSource = $(theSceneTemplate).html(), theTemplate = Handlebars.compile(theSource), theHTML = theTemplate(theValues), theClass = theSceneTemplate.replace("#",""); $(theTarget).prepend(theHTML); theApp.fadeInTheContent(theClass); }, fadeInTheContent: function(theClass) { setTimeout(function() { $("#container .content-container."+ theClass).addClass("active"); }, 100); }, bindAnEventToAnElement: function(theElement, theEvent, theFunctions) { $("body").on(theEvent, theElement, function() { switch (theElement) { case ".network": theApp.checkTheSelectedNetwork(this); break; case ".cta-container": theApp.loadLearnMoreWindow(); theApp.bindAnEventToAnElement(".view-demo-button", "click", null); break; case ".view-demo-button": theApp.closeLearnMoreModule(); break; case ".button": theApp.thePhoneCallSelection(this); break; } }); }, unbindAnEventFromAnElement: function(theElement, theEvent) { if (theEvent == "all") { $("body "+ theElement).off().unbind(); } else { $("body "+ theElement).off(theEvent).unbind(theEvent); } }, checkTheSelectedNetwork: function(theSelection) { var theClass = $(theSelection).attr("class").replace("network ",""); switch (theClass) { case "fake": theApp.theSelectedNetworkActions("Fake", theSelection); break; case "real": theApp.unbindAnEventFromAnElement(".network","all"); theApp.theSelectedNetworkActions("Real", theSelection); break; } }, theSelectedNetworkActions: function(theActionType, theSelection) { switch (theActionType) { case "Fake": $(theSelection).addClass("wrong"); $(".network-message").addClass("red").text("Insecure network selected. Try again."); break; case "Real": $(theSelection).addClass("correct"); $(".network-message").removeClass("red").addClass("green").text("Secure network selected. Connecting..."); setTimeout(function() { $(".content-container").removeClass("active"); }, 1250); setTimeout(function() { $(".network-connection").remove(); theVideo.play(); }, 2000); break; } }, loadLearnMoreWindow: function() { $(".cta-container").fadeOut(); $(".learn-more-container").addClass("active"); }, closeLearnMoreModule: function() { setTimeout(function() { $(".content-container").removeClass("active"); }, 550); setTimeout(function() { $(".learn-more").remove(); theVideo.play(); }, 1000); }, thePhoneCallSelection: function(theElement) { var theClass = $(theElement).attr("class").replace("button ",""); switch (theClass) { case "answer": setTimeout(function() { $(".content-container").removeClass("active"); }, 550); setTimeout(function() { $(".learn-more").remove(); theVideo.play(); }, 1000); break; case "decline": isDeclined=true; setTimeout(function() { $(".content-container").removeClass("active"); }, 550); setTimeout(function() { $(".learn-more").remove(); theVideo.currentTime = theInteractionPoints[4] / theFrameRate; theVideo.play(); }, 1000); break; } }, resetTheVideo: function() { theVideo.currentTime = 0; theIncrement="network-connection"; $(".phone-call").remove(); } }, theTimingFunctions = { getTheCurrentVideoFrame: function(theType) { var curTime = theVideo.currentTime, theCurrentFrame = Math.floor(curTime*theFrameRate); theTimingFunctions.checkCurrentTimeAgainstTheInteractivePoints(theCurrentFrame, theType); //console.log(curTime + " ---- "+ theCurrentFrame +" ||| "+ theInteractionPoints[0]); }, checkCurrentTimeAgainstTheInteractivePoints: function(theCurrentFrame, theType) { if (theType == "seek") { if (theCurrentFrame <= theInteractionPoints[0] && theIncrement !== "network-connection") { theIncrement = "network-connection"; } else if (theCurrentFrame >= theInteractionPoints[0] && theCurrentFrame < theInteractionPoints[1] && theIncrement == "network-connection") { theIncrement = "learn-more"; } else if ((theCurrentFrame >= theInteractionPoints[1] && theCurrentFrame < theInteractionPoints[2]) && (theIncrement == "network-connection" || theIncrement == "learn-more")) { theIncrement = "phone-call"; } else if ((theCurrentFrame >= theInteractionPoints[2] && theCurrentFrame < theInteractionPoints[3]) && (theIncrement == "network-connection" || theIncrement == "learn-more" || theIncrement == "phone-call")) { theIncrement = "ending"; } } switch (theIncrement) { case "network-connection": if (theCurrentFrame >= theInteractionPoints[0]) { theApp.updateTheInstructions(theIncrement); theApp.buildHandlebarsTemplate("#network-connection","#container",null); theVideo.pause(); theIncrement = "learn-more"; theApp.bindAnEventToAnElement(".network", "click", null); } break; case "learn-more": if (theCurrentFrame >= theInteractionPoints[1]) { theApp.updateTheInstructions(theIncrement); theApp.buildHandlebarsTemplate("#learn-more","#container",null); theVideo.pause(); theApp.bindAnEventToAnElement(".cta-container", "click", null); theIncrement = "phone-call"; } break; case "phone-call": if (theCurrentFrame >= theInteractionPoints[2]) { theApp.updateTheInstructions(theIncrement); theApp.buildHandlebarsTemplate("#phone-call","#container",null); theApp.bindAnEventToAnElement(".button", "click", null); theVideo.pause(); theIncrement = "ending"; } break; case "ending": if (theCurrentFrame >= theInteractionPoints[3]) { if (!isDeclined) { theVideo.pause(); theApp.buildHandlebarsTemplate("#centerline-ending", "#container", null); setTimeout(function() { theApp.resetTheVideo(); }, 2000); } } break; } } }; $(window).load(function() { }); $(document).ready(function() { theApp.init(); });
}(this, this.document, this.jQuery));
Interactive HTML5 Video Demo - Script Codes
Interactive HTML5 Video Demo - Script Codes
Home Page Home
Developer Daniel Yuschick
Username Yuschick
Uploaded September 25, 2022
Rating 3.5
Size 8,227 Kb
Views 12,144
Do you need developer help for Interactive HTML5 Video Demo?

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!

Daniel Yuschick (Yuschick) Script Codes
Name
IBM PureSystems - PureApp Emulator
Archer Pirate Virus - Snap SVG Demo
Flat Surface Shader Earth
Perrelet Turbine in SVGs
Ripples on the Water - Website Design
Pac Manufacturing Ghost Generator
SnapFoo v2 Demo - Loop a Group of Elements Along a Path
Responsive Diamond Navigation
Create amazing sales emails 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!