Как автоматически переключать разрешение видео в зависимости от скорости интернета?

Question

[Валерий]

Есть небольшая страничка с платным контентом в виде видеороликов.
Я разместил несколько видео на отдельном сервере с разрешением 1920px, скорость прекрасная, но если соединение у пользователя медленное, то видео конечно же начинает останавливаться каждые несколько секунд.

Самыйпростой способ решить эту проблему, это загрузить видео на платный хостинг типа JWplayer там видео сразу преобразуется в разные форматы, дается плеер и при воспроизведении автоматически выбирается качество видео в зависимости от скорости соединения. Но не совсем всё хорошо, потому что даже на хорошем соединении у пользователя видео начинает переключаться то на 180px, то на 720 и выглядит это не очень стабильно.

Следующий вариант, который мне пришел в голову это загурзить всё-таки на свой сервер, но уже несколько файлов с разными разрешениями (480, 720, 1920)
Но теперь вопрос, как заставить переключаться между ними?
Можно это сделать на JS в зависимости от разрешения экрана и для мобильных включать видео 480px, но это не совсем то потому что у кого-то может и дома на большом мониторе быть мдленное соединение.

Есть ли какие-то решения? Может быть какой-нибудь видео-плеер на JS умеет отслеживать загрузку и переключать разрешение или есть какое-то более лучшее решение этой проблемы?

Answer 1

[Johnny Rocket]

Почему бы просто не использовать в качестве хостинга YouTube или Vimeo?) Там есть необходимый функционал и при необходимости можно закрытый ак сделать (:

Comments

[Валерий]

Нажав на логотип youtube можно перейти на страницу с видео и делиться ей с кем угодно. В то время как если пользователь скопирует ссылку со страницы сайта, то доступа не будет. (разумеется мы говорим о рядовом пользователе, который не полезет в код страницы)

Vimeo я тоже думал, но пока разбираюсь с тарифами, там ограничение на загрузку видео в неделю и мне не хватает этого, чтобы загрузить всё видеорлики. Плюс стоить будет дороже чем свой VPS, не намного, но для редких и дешевых курсов хотелось бы минимизировать затраты. Но в целом мне нравится vimeo, я отпишусь если полностью устроит.

Answer 2

[Дмитрий]

Конвертируйте свои видео в HLS, современные плееры типа videojs, поддерживают стриминг HLS

Answer 3

[Дмитрий]

единственно надежный и реализуемый способ - разместить видео на специальном хостинге типо ютуба и прочего

другой вариант, использовать сервисы типо https://www.wowza.com
но это сложнее в настройке

если вам достаточно будет на фронте смотреть сеть пользователя, можно взять что-то такое

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

но это сработает не во всех браузерах

или попробуйте, как советуют в другом ответе, HLS