Preloader with image as progress bar

[Baltazar]

I’m trying and am searching for a preloader which progressively reveals an image (an image as progress bar that is). All I can find is preloaders showing animations of different kinds. Something like this: http://www.useragentman.com/blog/2012/01/16/caching-images-with-javascript-and-html5-progress-bars/

But instead of preloading images i’d like it to preload a video (HTML 5 format).

I can’t seem to manage it to work though. Maybe you have a more optimized solution since the example above is from 2012.

Many thanks in advance!

[Shikkediel]

Would you like to load one video and show the progress of that or several videos and update when each one has loaded? As far as I know there is no property that’ll tell you how much has been loaded momentarily, just if it’s finished.

[Baltazar]

Hi Shikkediel, just one video coded in some format which is accepted with a html 5 tag. Is there no way? In the example I provided I guess it shows progress when each image is loaded.

[Shikkediel]

The only option I can think of there is an Ajax request but I’m no expert on that. I see there’s a progress option with a XMLHttpRequest but am not sure that’ll work with video. Can’t help out there unless I start googling and experimenting myself.

An ‘indefinite’ loading bar would be much easier to implement (simply hide it when finished).

[Baltazar]

And by indefinite you mean that the image as a progress bar should have no relation to when the actual video is loaded/played. This is my plan B. Just to have the image being unmasked in the background of the video (if it is possible to make the video transparent and having the image behind, which I want in the background of the video anyway). Then the video should start anytime the image is being unmasked above it. Only thing I need to do then is to have some kind of delay for the next webpage to be displayed after the video is played through.

[Shikkediel]

no relation to when the actual video is loaded

I meant that it would have no relation to the percentage of loading progress but the bar could be hidden while listen to an number of events that would make the timing quite accurate :

http://www.w3schools.com/tags/ref_av_dom.asp

For example, canplay could be a good one. There’s also a progress event but that doesn’t give any information on the amount unfortunately.

after the video is played through

You could use ended for that one.

Caveat – I’m assuming your own site is the source of the video and not a YouTube iframe for example…

[Baltazar]

Hmm, I’m considering if there might be another solution avoiding showing a video. The things is I have imported the video into Flash to make some masking and animations. If it’s possible to export the video in another format and show it in HTML5.

[Shikkediel]

Not sure I completely follow but you could export it as .swf and embed it. I don’t think it’s a good idea to use Flash though. Vulnerable, bloated and won’t work on most mobile stuff.

Could you elaborate?

[Baltazar]

Yes that’s what I’m trying to avoid (swf and Flash). I was halftrough finished with the website when I realized I need to do it in HTML5 to make it futureproof. I need this sequence (it’s filmed) masked in Flash though. Just trying to figure out how, in what format I might be able to implement it in HTML5.

[Shikkediel]

Haven’t tried it myself but apparently Adobe Edge will create the HTML5 and jQuery for you…

[Baltazar]

Yes so i’ve heard. Unfortunately it’s only available from Windows 10 but there are som online converters: http://www.flash-to-html5.net

Haven’t tried it yet. Not sure it will work since i have a filmed object which is partly masked which i need displayed so it’s not the transitions i need converted. Maybe there’s a fast loaded video format i can export the file from flash which html5 recognizes.

[Author]

Posts