Как лучше всего предварительно кэшировать видео в веб-браузере / мобильном браузере на Android / iOS?

Question

Описание

В связи с быстрым приближением удаления синхронного XMLHttpRequest (например: Chrome 88 удаляет это), я ищу следующий оптимальный альтернативный метод для предварительного кэширования видео.

«Синхронный XMLHttpRequest - ужасная идея» - никто никогда не говорил

Да, вы правы для большинства сценария ios но это другое.

Ранее

На android и ios компания, в которой я работаю, имеет SDK, который открывается a webview в фоновом режиме, внедряет в него HTML и ожидает срабатывания события onload. Это уведомляет SDK, когда веб-просмотр готов к показу пользователю.

Это обязательно , что при воспроизведении видео НЕТ буферизация вообще для лучшего возможный опыт.

Это почему , когда веб-просмотр загружается в фоновом режиме, мы предварительно кэшируем видео синхронно с XMLHttpRequest (что, как следствие, задерживает onload событие от увольнения).

Возможные решения

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

1. Предварительная загрузка содержимого через <link rel="preload" ... />
2. Вставьте видео на страницу index.html в base64 (если видео веса 2-3Mo, он будет весить на 30% больше после преобразования в base64)

(1) - самый чистый метод, но требует некоторых тяжелых изменений в нашем бэкэнде для различных причины. Также нет гарантии, что видео будет полностью кэшировано к моменту появления браузера / веб-просмотра. Нет гарантии, что приоритет предварительного кэширования будет одинаковым для веб-просмотров и мобильных браузеров. Пользователи могут отключить функции предварительного кэширования, например, в своей конфигурации Chrome. Он также не работает при подключении 4G или ниже ( вздох ).

(2) - хакерский и неоптимизированный метод, но относительно прост в реализации по сравнению с на (1)

Вопрос

Какой следующий лучший метод предварительного кэширования видео в фоновом режиме веб-браузера / мобильного браузера, который:

1. Гарантии (или полностью гарантирует) отсутствие буферизации при воспроизведении видео
2. Выполняется в веб-просмотре / браузере
3. Является ли (желательно) кросс-мобильный браузер / веб-просмотр совместимым
4. (желательно и не обязательно) задерживает запуск события onload

Примечание: не все пользователи могут иметь соединение 4G или Wi-Fi. Note2: тег находится в режиме автовоспроизведения

Answer 1

Чтобы гарантировать отсутствие буферизации при воспроизведении видео, видео можно сначала загрузить как blob, используя собственный fetch API, а затем преобразовать в objectURL с помощью window.URL.createObjectURL. Затем этот URL-адрес можно использовать в качестве источника для элемента видео

Это собственный API, встроенный в веб-просмотр / браузер, и отчет о совместимости можно найти здесь Могу ли я использовать выборку

И вместо того, чтобы слушать событие onload, слушайте какое-нибудь другое настраиваемое событие, которым вы можете управлять вручную. Это также даст большую гибкость в будущем.

  <script>

      fetch('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4').then(response => {
          //Video Download Started
          return response.blob();

      }).then(data => {
          //Video Downloaded"
          let objectUrl = window.URL.createObjectURL(data);
          document.querySelector("#myvideoPlayer").src = objectUrl;

          //Trigger a custom event here
      }).catch(error => {
          // Log Error
      })

  </script>

  <video controls id="myvideoPlayer"></video>

Answer 2

Если вы загружаете страницу html - используйте preload = "auto" в теге видео. Это указывает браузеру загружать все видео при загрузке страницы (по умолчанию preload = "metadata" загружает 3-5% видео).

Затем вы можете посмотреть на mediaEvent canPlayThrough, чтобы запустить чтобы узнать, когда видео готово к воспроизведению ( ссылка MDN ).

Задумывались ли вы о потоковой передаче видео? Правильно настроенный поток должен начинать воспроизведение немедленно и практически не иметь буферизации, поскольку алгоритм адаптивного битрейта может изменять передаваемое видео в зависимости от экрана устройства И пропускной способности сети. api.video имеет отличный сервис (с SDK для iOS, Android и несколькими веб-интерфейсами)

Answer 3

Новое решение с использованием Cache API

caches = window.caches;
caches.open("app-assets").then((cache) => {
  cache.add(linkToFileToBeCached).then(() => {
    // Now the file is cached. Start rendering the app!
  });
});