How to add loader image to HTML5 video?

Question

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 ?

Answer 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>

Answer 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>

JS

$('#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