How to add loader image to HTML5 video?

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>

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

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.