Add option to use AVERAGE-BANDWIDTH in playlist selector

[josephsellers]

Description

I can't get a long 4k HLS video to automatically stream higher than 720p. Here is my setup: https://jsbin.com/gaforavito/edit?html,output

At first the video was starting at 240p and then working up to 360p but I read here: https://github.com/videojs/http-streaming/issues/713 about setting limitRenditionByPlayerDimensions and bandwidth which worked and now I get the video starting at 720p and staying there but can't get it to go any higher.

If I manually set the video to play at 4k it does just fine with just a tiny bit of buffering at the beginning and then without issues. The same video on Flowplayer plays at 4k using the same setup (same browser, computer, internet connection, etc).

Strangely, a shorter 4k clip encoded the same way does go up to 4k.

Sources

https://f000.backblazeb2.com/file/wwmc-video-streaming/shoe-tidy-episode-5-test/shoe-tidy-episode-5.m3u8

Steps to reproduce

1. Use the latest versions of Videojs, videojs-contrib-quality-levels, and videojs-http-source-selector
2. Use a long 4k HLS video created by coconut.co such as the one linked above.
3. Set limitRenditionByPlayerDimensions to false and bandwidth to 4x.

Results

Video plays at a max of 720p.

Expected

Video will play at 4k on good internet connection.

Error output

None.

Additional Information

I tried this with a shorter video (otherwise the same setup) and the video would cycle through up to 4k.

videojs version

video.js x7.6.6

Browsers

Chrome 80

Platforms

MacOS 10.15.3

Other Plugins

videojs-contrib-quality-levels, and videojs-http-source-selector (just so that we can clearly see which version is playing)

Other JavaScript

None.

[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.

[gesinger]

Hey @josephsellers , I think this may be due to your bandwidth.

Setting the BANDWIDTH value will alter the initially requested playlist, but VHS will automatically update the BANDWIDTH each time a segment is downloaded to choose the best stream available (to minimize buffering). The fact that you were seeing buffering means that, most likely, your measured bandwidth when downloading the content was too low to keep up with the 4k content.

This could be due to your connection, or the server's response time.

Locally I tested and after starting the player jumped up to the 1080 stream immediately, but then jumped back down as the measured bandwidth dropped.

I could also play the 4k stream by manually enabling it:

player.vhs.representations().forEach((rep) => {
  if (rep.width < 3000) {
    rep.enabled(false);
  }
}); 

[josephsellers]

Thanks for the reply @gesinger!

I am hoping to switch to VideoJS from Flowplayer. I have been using my HLS playlists for a while already using Flowplayer and when I am on my office internet connection (50mbps) or home internet connection (35mpbs) Flowplayer switches up to 4k no problem but I cannot get VideoJS to get past 720p.

Yes, manually switching to 4k works great and plays within a second or two without hanging or lagging. I just don't know why it never automatically switches up to 4k.

All that to say, I am pretty certain that the bandwidth is there on my internet connection to play at 4k.

I checked the bitrate and the 4k stream is 8.4mbps. I tested my playlist on this website: https://bitmovin.com/demos/stream-test, and this one, https://hls-js.netlify.com/demo/ and on both it jumped to 4k within seconds.

This makes me think that something is definitely going wrong somewhere.

Are there other settings I can experiment with in VideoJS? Is there some kind of cap on resolution that I need to change? Or, is there some incompatibility with the way my playlists are encoded perhaps?

Any suggestions or ideas are gratefully received.

[josephsellers]

Just a quick update.

We have been using these same playlists for many months with Flowplayer and they play at 4k no problem. So, when we couldn't get the same playlists to go above 720p on VideoJS we were very confused.

We have dug into this a lot further and we realised that Flowplayer is using the 'AVERAGE-BANDWIDTH' whereas VideoJS uses 'BANDWIDTH'. For whatever reason there must be a lot of variance in our playlists which resulted in the 'BANDWIDTH' being way higher than 'AVERAGE-BANDWIDTH'.

We forced VideoJS to look at 'AVERAGE-BANDWIDTH' and it behaves much more like we would expect.

This is the line we added:

bandwidth = parseInt(playlist.attributes['AVERAGE-BANDWIDTH'], 10);

I guess I would like to turn this into a feature request if I can. Please could you give us an option to use 'AVERAGE-BANDWIDTH' instead 'BANDWIDTH'?

[gesinger]

Thanks for the research and the finding @josephsellers . I think that adding an option to use AVERAGE-BANDWIDTH over BANDWIDTH when it's available would be a good one to have. I imagine that line is added somewhere around https://github.com/videojs/http-streaming/blob/8953c3a8b74ff7165b4cf5306d22fec960a389bc/src/playlist-selectors.js#L146 ?

Would you be interested in making a pull request to add the options and pass it through? If not, we can add it to do in the future, but we're not sure when we'll get around to it yet.

[gesinger]

I also updated the title, I hope that's OK!