Video Preloader

Developer
Miro Olma
Size
2,513 Kb
Views
66,759
  1. Video Preloader Previews
  2. Video Preloader HTML Codes
  3. Video Preloader CSS Codes
  4. Video Preloader JS Codes

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 Previews
IQ Test

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();
Video Preloader - Script Codes
Video Preloader - Script Codes
Home Page Home
Developer Miro Olma
Username programiro
Uploaded November 24, 2022
Rating 4
Size 2,513 Kb
Views 66,759
Do you need developer help for Video Preloader?

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!

Miro Olma (programiro) Script Codes
Name
Sticky Footer
Justify Navi
Input autofill for Klickdummy on focus
A Pen by Miro Olma
Fade on scroll
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!