Search code examples
videopreloadbuffering

How to preload part of video so there is no buffering?

Is there a way to preload part of the video (show a loading bar until then), and then start to play it? We don't want any buffering issues on the site.

I tried searching similar topics, didn't find any.

Thanks in advance.

Solution

  • Its very hard to make sure that there will be no buffering of a video by trying to download enough into the buffer before starting, as network conditions can change quite a bit over the duration of even a moderate length video.

    The only way to guarantee it would be to download nearly all the video and even then if the network went extremely slow you might still get buffering at the end.

    The usual approach to try to get the high quality experience you are looking for is to use Adaptive Bit Rate steaming.

    To use this you create multiple different bit rate versions of your video on the server and break each one up into chunks by time, e.g. 10 second chunks.

    The client then requests the video chunk by chunk, with some buffering as normal, and it chooses which bit rate to request the next chunk from depending on the network conditions.

    So if the network is good, the user will get a high resolution video experience and if it is bad the resolution will drop. So long as there are a good mix of bit rate versions, this avoids buffering unless the network is very bad.

    You can see this technique used by YouTube, Netflix etc - in YouTube if you look at the setting you can play around with it and force it to choose one particular bit rate size and see the effect (if you choose a high one you will probably see the buffering problem you describe unless you are on a very good internet connection).

    The approach also allows quick start of video by starting at a lower bandwidth and then stepping up to the higher ones once more video is buffered.

    You can also see a nice graphical view of the bit rates steps and the buffer on YouTube by right clicking the video and selecting 'stats for nerds' - it gives a view like this:

    enter image description here

    If you really do want to play around with the size of the buffer before you start playback then you will probably need to modify the player itself or create your own player.

    In the web player domain, HTML5 players generally now use Media Source Extensions (MSE) which would allow you to control the buffering if you wanted to. MSE is essentially a mechanism to associate a buffer with a HTML5 video src, rather than the usual file or URL. You can then write your own JavaScript you want to fill the buffer as you want. A good intro is here (skip down to the MSE section):