Increase buffer size or time for video-js HTML5 player

Question

how do I increase buffer on video-js HTML5 player? I have a US server and in the US is all fine but clients in EU have loading issues related to video caching. buffer size in video.js is constant value and I want to change it.

Answer 1

You can now customize the buffer length by modifying videojs.Hls.GOAL_BUFFER_LENGTH for change buffer size of HLS videos, I tryed and It's work for me

Answer 2

For me this has worked (video.js 7.7.6):

let player = videojs('my-player');

player.vhs.options_.externHls.GOAL_BUFFER_LENGTH = 60;

You might also need to change the MAX_GOAL_BUFFER_LENGTH value, e.g.:

player.vhs.options_.externHls.MAX_GOAL_BUFFER_LENGTH = 80;

The case when you might need to increase buffer length values is when your viewers are facing buffering during playback (e.g. the spinner instead of a video). Video.js may give a warnings in the console that means its buffer values have been changed.

Be careful with a buffer length values. If it is a live streaming the browser will continue to load (buffer) video segments and the higher buffer values are the more MB will be downloaded even after pausing/stopping the player.

Video.js DOCS: https://github.com/videojs/http-streaming

Video.js Troubleshooting: https://github.com/videojs/http-streaming/blob/main/docs/troubleshooting.md

Used Type Definitions for VideoJS: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/video.js