Video Preloader
How do I make an video preloader?
This was made for a Video / Image / Text page to preload videos... videojs('placeholder').on('loadeddata', function() {. What is a video preloader? How do you make a video preloader? This script and codes were developed by Miro Olma on 24 November 2022, Thursday.
Video Preloader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video Preloader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="preloader-canvas"> <div class="blink">Video loading...</div>
</div> <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 Preloader - Script Codes CSS Codes
#preloader-canvas { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.blink { color: white; width: 50%; height:auto; position: absolute; top: 25%; right: 25%; bottom: 25%; left: 25%; text-align: center; font-size: 5em; -webkit-animation-name: blink; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 1s; -moz-animation-name: blink; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -moz-animation-duration: 1s; -ms-animation-name: blink; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -ms-animation-duration: 1s; -o-animation-name: blink; -o-animation-iteration-count: infinite; -o-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -o-animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(1.0,0,0,1.0); animation-duration: 1s;
}
@-webkit-keyframes blink { from { opacity: 1.0; } to { opacity: 0.0; }
}
@-moz-keyframes blink { from { opacity: 1.0; } to { opacity: 0.0; }
}
@-ms-keyframes blink { from { opacity: 1.0; } to { opacity: 0.0; }
}
@-o-keyframes blink { from { opacity: 1.0; } to { opacity: 0.0; }
}
@keyframes blink { from { opacity: 1.0; } to { opacity: 0.0; }
}
Video Preloader - Script Codes JS Codes
/* INIT VIDEO */ //This is the block size var tam = 300; //Container var videoPreloader = $('#preloader-canvas'); function img() { var c = document.createElement("canvas"); c.width = tam; c.height = tam; var o = c.getContext("2d"); //Change your pixel size and shape, tam should leave no remainder when divided by either var pixelWidth = 1; var pixelHeight = 1; // Draw rectangles is faster than modify ImageData for(var y = 0; y < tam; y+=pixelHeight) { for(var x = 0; x < tam; x+=pixelWidth) { o.fillStyle = Math.random() < .5 ? "#dfdfdf" : "#000"; o.fillRect(x, y, pixelWidth, pixelHeight); } } var img = c.toDataURL(); videoPreloader.css('background-image', 'url(\'' + img + '\')'); mexer(); } function mexer() { videoPreloader.css('background-position', Math.floor(Math.random() * tam) + "px " + Math.floor(Math.random() * tam) + "px"); if(typeof webkitRequestAnimationFrame == 'function'){ webkitRequestAnimationFrame(mexer); } else if (typeof mozRequestAnimationFrame == 'function') { mozRequestAnimationFrame(mexer); } else if (typeof requestAnimationFrame == 'function') { requestAnimationFrame(mexer); } } img();
Developer | Miro Olma |
Username | programiro |
Uploaded | November 24, 2022 |
Rating | 4 |
Size | 2,513 Kb |
Views | 66,792 |
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!
Name | Size |
Sticky Footer | 1,697 Kb |
A Pen by Miro Olma | 2,342 Kb |
Fade on scroll | 2,084 Kb |
Input autofill for Klickdummy on focus | 2,036 Kb |
Justify Navi | 1,819 Kb |
Video Preloader | 2,513 Kb |
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!
Name | Username | Size |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Svg sky | Omodev | 7,070 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!