Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Preloader with image as progress bar

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #205531
    Baltazar
    Participant

    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!

    #205641
    Shikkediel
    Participant

    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.

    #205642
    Baltazar
    Participant

    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.

    #205643
    Shikkediel
    Participant

    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).

    #205647
    Baltazar
    Participant

    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.

    #205648
    Shikkediel
    Participant

    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…

    #206948
    Baltazar
    Participant

    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.

    #206949
    Shikkediel
    Participant

    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?

    #206950
    Baltazar
    Participant

    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.

    #206951
    Shikkediel
    Participant

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

    #206964
    Baltazar
    Participant

    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.