Buffer start and buffer end events

[arvinsim]

Description

I would like to request the addition of native Video.js events for when a video starts buffering and when it stops buffering.

In our project, we use an analytics tool to track video performance metrics, including when buffering begins and ends. Currently, we approximate these events by emitting a "buffer start" event when the player enters the WAITING state and a "buffer end" event when playback resumes.

The current solution of using the WAITING state to infer buffering start and relying on playback resumption to signal buffering end does not reliably capture all instances of buffering behavior. This can lead to inaccurate analytics data and affect performance metrics reporting.

It would be highly beneficial for Video.js to provide native events specifically for "buffer start" and "buffer end." It would significantly improve the ability to track and analyze video performance in Video.js.

NOTE: There is already a precedent to this issue but progress event is not what is needed.

Reduced test case

NA

Steps to reproduce

NA

Errors

No response

What version of Video.js are you using?

7.20.2

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

NA

What OS(es) and version(s) does this occur with?

NA

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[ScarboroughCoral]

request +1

[amtins]

@arvinsim, @ScarboroughCoral the waiting and playing events should be sufficient for this use case. However, I've noticed that Safari isn't very consistent when it comes to getting out of waiting, and in this case it's preferable to use timeupdate.

The problem with creating arbitrary events is that they deviate from the specification and are only intended to meet a very specific business need.

Finally, here's an example of how it might look:

let isWaiting = false;

const waiting = ()=> {
  if(isWaiting) return;

  const bufferStop = () => {
    isWaiting = false;
    console.log('buffer_stop');
  };

  isWaiting = true;

  console.log('buffer_start');

  player.any(['playing', 'timeupdate'], bufferStop);
}

player.on('waiting', waiting);

You can also take a look at our implementation https://github.com/SRGSSR/pillarbox-web/blob/13acd7c4e924b1be52ecc2b2668ffad4a7bd9fef/src/trackers/SRGAnalytics.js#L877-L899. Please note that our implementation is validated/certified by Comscore and we've been using it for years.

[gkatsev]

Additionally, video.js doesn't specifically handle maintaining a forward buffering itself (like some other players), so, our potential events would mirror the existing events.