Consider object-fit when selecting playlist by player size

[tf]

Description

So far, when limitRenditionByPlayerDimensions is true, simpleSelector tried to either find a rendition with a resolution that matches the size of the player exactly or, if that does not exist, a rendition with the smallest resolution that has either greater width or greater height than the player. This makes sense since by default the video will be scaled to fit inside the media element. So every resolution that exceeds player size in at least one dimension will be scaled down.

Most browsers support customizing this scaling behavior via the object-fit CSS property. If it set to cover, the video will instead be scaled up if video and player aspect ratio do not match.

The previous behavior caused renditions with low resolution to be selected for players with small width (e.g. portrait phone aspect ratio) even when videos were then scaled up to cover the whole player.

We therefore detect if object-fit is set to cover and instead select the smallest rendition with a resolution that exceeds player dimensions in both width and height.

Specific Changes proposed

The first two commits are preparatory refactorings. The third commit contains the change itself.

Requirements Checklist

• [x] Feature implemented
• [ ] If necessary, more likely in a feature request than a bug fix
  • [x] Unit Tests updated or fixed
  • [x] Docs/guides updated
  • [x] Example created (see comment below)
• [ ] Reviewed by Two Core Contributors

[welcome[bot]]

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

• Run npm run lint -- --errors locally to catch formatting errors earlier.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[tf]

Both CI_TEST_TYPE=playback npm run test and CI_TEST_TYPE=unit npm run test pass locally. Not sure if failure of playback test in CI is related.

[tf]

Regarding docs: A note about the feature could be added to the docs of limitRenditionByPlayerDimensions in the readme. The bitrate switching guide also seems relevant, feels a bit outdated already, though.

[tf]

Here's an example showcasing the new behavior using a build that includes the changes from the PR branch.

https://jsbin.com/wuxabonezo/1/edit?html,output

[tf]

Could somebody take a look at this PR?

[tf]

Changed the test case to use the original value again. Rebased onto main for linting fix.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tf]

Rebased onto main. Updated jsbin showcasing the new behavior using the latest version of Video.js:

https://jsbin.com/vipikadeni/edit?html,output