Preloading Videos (plus custom preloading screen)

Hi there… a two-pronged question, here.

1). I’m loading a number of small vids into their own individual and respective ‘frames’. I’m using rectangle elements for the frames rather than the video widget as the vids have timeline-based custom play controls. The code I’m using in the rectangle elements is as follows (with each being different i.e. video01, video02 etc).

 <video id="video01" width="100%" height="100%" preload="auto" playsinline="" muted="">
	<source type="video/mp4" src="${resourcesFolderName}/video01.mp4">
 </video>

This all works fine apart from Hype’s inbuilt preloader doesn’t seem to take account of the videos… i.e. the preloader quits and displays the scene long before the vids have loaded. Is there something I’m missing and/or is there a work-around for this?

2). I’d like to use a custom preloader along the lines of the one detailed here but I’m using responsive layouts and I can’t work out if said method can be applied in that context (or even if it’s possible to have a custom preloader in responsive layouts?).

I’ve been scouring the forums for possible solutions but haven’t quite been able to find what I’m after; so would be very grateful for any steers in the right direction. Many thanks in advance for any help and advice :slight_smile:

Hype only preloads images and audio at this time.

(If it did ever add preload functionality, it would also not be able to do so if you use your own HTML tags - you'd have to add the video directly in Hype and let it manage it.)

I don't think there should be a problem using custom preloaders with that method and responsive layouts. You might need to adjust the inner div sizing. Feel free to post what you made/how you're doing it and we can take a glance to see what might be going on.

That’d be really great, cheers. Huge thanks! I’ll get something posted up as soon as I’m back at my desk :slight_smile:

And thanks, too, for the clarification re: vid preloads…it’s much appreciated. I’ll have to put my thinking hat on and try and find a different way to approach the matter :smiley:

Hi again. So, the project I’m working on (I tried to upload a zip of the mock-up but it’s slightly too big) has multiple layouts as follows:-

230 x 230
290 x 290
480 x 300
650 x 400
815 x 500

Along the lines of the instructions given here I’ve created a ‘preloader.gif’ and made it the same size (815 x 500px) as the largest of the layouts. It resides in the main folder and is referenced in the project’s html file as follows:-

<div id="responsivepreloadertest_hype_container" style="margin:auto;position:relative;width:100%;height:240px;overflow:hidden;">
	<div style="position: absolute; top: 0; left: 0; width: 815px; height: 500px;">
	<img src="./preloader.gif"/>
	</div>
	<script type="text/javascript" charset="utf-8" src="responsivePreloader_test.hyperesources/responsivepreloadertest_hype_generated_script.js?23885"></script>
</div>

The preloader loads fine but obviously doesn’t match the dimensions of any of the layouts.

I’m hoping the fix is just something simple that I’m overlooking due to too many hours spent getting into a frazzle over it all :wink:

Cheers in advance for your time and for any advice :slight_smile:

It’s never been super straightforward to vertically and horizontally center elements. You could center your element using code like this: height:100vh;display:flex;align-items:center;justify-content:center;

VH is the percentage of the viewport height. Here’s how that behaves: https://jsfiddle.net/themorgantown/oj246zoq/1/

<div id="responsivepreloadertest_hype_container" style="margin:auto;position:relative;width:100%;height:240px;overflow:hidden;">
	<div style="height:100vh;display:flex;align-items:center;justify-content:center;">
	<img src="./preloader.gif"/>
	</div>
	<script type="text/javascript" charset="utf-8" src="responsivePreloader_test.hyperesources/responsivepreloadertest_hype_generated_script.js?23885"></script>
</div>
2 Likes

You may also want to set the width of your preloader to scale up and down to a certain point:

<img style="width:50vw;max-width:300px;" src="./preloader.gif"/>

2 Likes

You superstar! Thank you so much for that! Absolutely spot on! :smiley: