css - Best way to load a video before into a web page with a progress bar -

i want play video of 30 seconds on website uses html5 css , javascript. make sure video loaded before playing plays out interruptions.

any quick , simple solutions.

you'll need implement javascript achieve you're looking for.

you can bind "buffered" event, (in chrome @ least) works fine except doesn't call last "buffered" event (i.e. detect 90%...94%...98%... won't call on 100%).

note: recent versions of jquery should use .prop() instead of .attr()

to around i've used setinterval() check buffer every 500ms (where $html5video <video> element:

var videoduration = $html5video.attr('duration');  var updateprogressbar = function(){     if ($html5video.attr('readystate')) {         var buffered = $html5video.attr("buffered").end(0);         var percent = 100 * buffered / videoduration;          //your code here          //if finished buffering buffering quit calling         if (buffered >= videoduration) {                 clearinterval(this.watchbuffer);         }     } }; var watchbuffer = setinterval(updateprogressbar, 500);