How to Preload Video

Hi could anyone tell me how to preload a video?

1 Like

By default, we set the property preload="auto" on videos when you use the standard video element. When the scene is loaded, the video should be preloaded (this depends on what browser or device you’re talking about).

For desktop browsers, if you want to preload it before showing it on the scene, you could place it off the scene and then animate its location to where you want it to be when it should play.

Tried a forum and google search and this is the thread that keeps popping up. I’ve got a sales presentation that uses a lot of videos that the sales people want to be able to load from a website. As a result, the download time isn’t the issue, it’s the requiring us to click through the presentation to make sure all videos are loaded and playing smoothly. Is there a technical reason why videos don’t have a checkbox option to preload like images do?

I tried making a beginning scene that has every video on it, but it’s kind of an odd way to go about it.

In the meantime, where is the auto value hiding? Is it in the code on export and can I just set it to true?

Thanks everyone!

  • Ryan

Browsers handle video embeds differently: when it is 'in the dom' (or you are on the scene) the browser looks at the 'preload' value and does what it thinks it best. On Mobile devices, this could mean 'download the first frame', but on desktop browsers this could mean 'download the first 5 seconds' to prepare the video for playing.

One thing you could do is create an initial scene which contains all your videos off the visible scene, and preload and play all your videos in the background muted. To do this in purely Hype, you would you use these settings in the element inspector:

10 AM

This will cause issues if you have more than 5 videos at once playing, but on most desktops this should be fine. Definitely test this out :slight_smile:

If you want to purely avoid the black rectangle which appears while the video is loading, you could use:

document.getElementById('myvideo').setAttribute('poster','${resourcesFolderName}/image.png');

... to set a 'poster' image on the video while it is loading. This would need to run 'on scene load' for the scene where it is present.

Always appreciate the detailed responses. This is one of the big reasons I’m always recommending this app, the forum help is second to none. :grinning:

4 Likes