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 |
Fade on scroll | 2,084 Kb |
Sticky Footer | 1,697 Kb |
Input autofill for Klickdummy on focus | 2,036 Kb |
Justify Navi | 1,819 Kb |
A Pen by Miro Olma | 2,342 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 |
Menu | Vivi_Lai | 1,210 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Yuliya v krylova | Rafszul | 37,351 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!