How to automatically switch video resolution based on internet speed?

Question

JavaScript

There is a small page with paid content in the form of videos.
I hosted a few videos on a separate server at 1920px, the speed is fine, but if the user's connection is slow, the video of course starts to freeze every few seconds.
The easiest way to solve this problem is to upload the video to a paid hosting such as JWplayer where the video is immediately converted to different formats, the player is given and the video quality is automatically selected during playback depending on the connection speed. But not everything is fine, because even on a good connection, the user's video starts switching to 180px, then to 720 and it does not look very stable.
The next option that came to my mind is to still upload to my server, but already several files with different permissions (480, 720, 1920)
But now the question is, how to force switching between them?
You can do this in JS depending on the screen resolution and for mobile include a 480px video, but this is not quite right because someone may have a slow connection on a large monitor at home.
Are there any solutions? Maybe some JS video player can track the download and switch the resolution, or is there some better solution to this problem?

Answer 1

Why not just use YouTube or Vimeo as hosting?) It has the necessary functionality and, if necessary, you can make a closed account (:

Answer 2

Convert your videos to HLS, modern players like videojs support HLS streaming

Answer 3

the only reliable and feasible way is to place the video on a special hosting like youtube and
another option, use services like https://www.wowza.com
but it's more difficult to set up
if it will be enough for you to watch the user's network at the front, you can take something such

const connection = window.navigator.connection.effectiveType;
if ((connection === '4g' && likelihood > .25) ||
    (connection === '3g' && likelihood > .5) ||
    (connection === '2g' && likelihood > .75)) {
  // грузим разные большие файлы
} else {
  // грузим маленький файл или ничего не грузим
}

but it won't work in all browsers
or try as advised in another answer HLS