CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
mike_freegan
mike_freegan

Reputation: 368

HTML 5 Video buffering and jQuery $( document ).ready()

Whenever I want to show a loading screen on a web-page, I use jQuery's "$( document ).ready()" function to detect this, and set the body's CSS to visible once it has loaded. Easy.

However, I'm currently working on two websites that use background video. I'm using HTML5 video for this. I was just wondering how I should combine the two?

Basically, I want the loading screen to show until the video is ready to play, and then it autoplays. I guess just until it's buffered enough to start playing without stuttering. I don't want to wait for the whole video to load because it's a music video

Upvotes: 0

Views: 1851

Answers (2)

Aditya
Aditya

Reputation: 1261

You could try using a combination the HTML buffered property and duration. Both these properties will return a time value.Since the basic idea is to show the loading screen until the video is ready to play i.e. it is fully buffered, you could try something like this:

if(video.buffered.end(0) == video.duration) { 
  // do your thing
}

So if the length of buffered video is equal to the duration of the video, it will mean the video is ready to play.

Upvotes: 0

Nico Wiedemann
Nico Wiedemann

Reputation: 174

HTML5 media elements fire a lot of events. One of them is called "canplaythrough" and is what you seem to be looking for.

https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough

Upvotes: 1

Related Questions