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);
Comments
Post a Comment