How To Add Loader Image To HTML5 Video?

December 19, 2022 Post a Comment

Along with the poster image I want a loader image(an animated gif) to be displayed while the video is being downloaded. How is it possible ?

Solution 1:

A cheap way could be to use an animated GIF in the poster attribute which will be replaced when the video begins to play. Example:

<video poster="loading.gif" preload="auto" controls autoplay>
   <source type="video/mp4" src="video.mp4"/>
</video>

Solution 2:

Here is my solution for this problem since pixelearth's answer doesn't seem to work on firefox (probably a problem with the fake poster)

HTML

<video id="video1" height="236" preload="auto" controls>
  <source src="yourVideo.mp4">
  Your browser does not support HTML5 video.
</video>

$('#video1').on('loadstart', function (event) {
  $(this).addClass('background');
  $(this).attr("poster", "/your/loading.gif");
});

$('#video1').on('canplay', function (event) {
  $(this).removeClass('background');
  $(this).removeAttr("poster");
});

CSS

video.background {
  background: black
}

With this answer you don't have to mess around with fake poster or abuse attributes for purposes that they were not made for. Hope this helps.

P.S. You could of course add some more events to add the poster attribute e.g. if it can't play further in the middle of the video and needs more buffering

You can find a jsfiddle which shows my code here

Solution 3:

You could attach a listener to the video's loadstart event and use it to overlay an animated GIF on top of the video element, then hide the loading overlay once the loadeddata event fires. See The W3C's media events draft for a list of events you can hook into.

They also have a demo page for media events.

Solution 4:

It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.

My original theory that I thought should have worked (but wouldn't) was this

Add loading bg image to video when loading via js and css
Remove when ready to play

Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS (loading class applied to video with JS)

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

  $('#video_id').on('loadstart', function (event) {
    $(this).addClass('loading')
  });
  $('#video_id').on('canplay', function (event) {
    $(this).removeClass('loading')
  });

This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!

Solution 5:

This is quite complicated, you must listen to various video events to show/hide & update width of the loader image correctly. Those events include (but may not limited to): loadstart, progress, loadeddata, waiting, seeking, seeked. You can use a certain open source player (e.g. jPlayer) or download its source to examine further.

Html5 Pros