Изменение источника / качества видеопотока HTML на лету - PullRequest
Новая
       11

Изменение источника / качества видеопотока HTML на лету

0 голосов
/ 04 октября 2018

Справочная информация: Я работаю над видеопроектом с более чем 50 короткими видео (10 минут, 720p), которые я хочу представить в Интернете.Моя текущая архитектура заключается в размещении 16 видео-тегов в сетке 4x4, а затем в произвольном порядке устанавливая их источник при загрузке с использованием JavaScript, и при масштабировании клика по видео, чтобы охватить весь экран до повторного нажатия.

Проблема: Каждое видео в формате 720p webm составляет около 80 МБ.С 16 видео, которые составляют 1,3 ГБ всего, или 130 МБ в минуту, или 2 МБ в секунду.Это нелепое количество данных, я думаю, может быть, я ошибаюсь.Каждое видео настолько большое (80 МБ), чтобы поддерживать функцию полноэкранного масштабирования.

Моя идея для решения: Каждое видео в двух разрешениях и использование низкого разрешения длямакет сетки и более высокое разрешение при нажатии на увеличение.

Мой вопрос: Как сделать это плавным?Могу ли я предварительно загрузить видео высокого разрешения по клику в фоновом режиме в положение видео низкого разрешения?И сделать сдвиг в CSS-преобразовании?Или есть лучший способ сделать это?

Вторичный вопрос: Как разместить это в Интернете?Могу ли я поставить видео на Vimeo, может быть?Прямо сейчас я использую хостинг на wordpress.com.

1 Ответ

0 голосов
/ 05 октября 2018

Обычный способ добиться чего-то подобного - это кодировать видео с использованием адаптивного формата битрейта.Два основных формата для этого будут либо HLS, либо MPEG-DASH.Большинство онлайн-платформ кодирования могут предоставить их в качестве выходных данных.Обычно вы закодируете 5-6 различных качеств (это помогает пользователям, которые находятся на Wi-Fi, где пропускная способность может постоянно изменяться), но вы можете легко закодировать его только двумя разными качествами.

Обычно игроки могутдля автоматического выбора нужного качества, но вы можете сами управлять этим, если хотите.

Если вы собираетесь использовать HLS, вы можете использовать hls.js и Переключатель качестваAPI .Для MPEG-DASH хорошим игроком будет Shaka Player , а затем установите его следующим образом: 

player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);

Если вы хотите специально переключиться на полноэкранный режим, просто прослушайте полноэкранный режимсобытия на игроков.

...