Hls.js: Add loading indicator while video is buffering

[nodegin]

Hello, I planned to switch from Shaka player to HLS.js

In Shaka, there is a buffering event I can use to show the loading spinner in my custom player.

this.player.addEventListener('buffering', (event) => {
  this.isBuffering = event.buffering
})

But in HLS.js, I cannot find similar events so far, what I tried so far is:

this.player.on(window.Hls.Events.FRAG_LOADING, () => {
  this.isBuffering = true
})
this.player.on(window.Hls.Events.BUFFER_APPENDING, () => {
  this.isBuffering = true
})
this.player.on(window.Hls.Events.FRAG_PARSING_DATA, () => {
  this.isBuffering = true
})
this.player.on(window.Hls.Events.BUFFER_APPENDED, () => {
  this.isBuffering = false
})
this.player.on(window.Hls.Events.FRAG_PARSED, () => {
  this.isBuffering = false
})

But this is buggy, the spinner will still keep even the video is playing
Thanks for any help

[itsjamie]

Hello, a section of the documentation that might help is: https://github.com/video-dev/hls.js/blob/master/docs/API.md#media-errors.

The BUFFER_STALLED event may be helpful to you.

[nodegin]

@itsjamie Hi, thanks for your help, I got it work now!

this.player.on(window.Hls.Events.ERROR, (event, { details }) => {
  if (details === window.Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
    this.isBuffering = true
  }
})
this.player.on(window.Hls.Events.FRAG_BUFFERED, () => {
  this.isBuffering = false
})