Элемент не имеет поддерживаемых источников при назначении видео позже при выполнении

Question

Я понимаю, что это вопрос, который задавали много раз, но после долгих поисков «похожих вопросов» никто не решил мою проблему. Вот моя ситуация:

Мне нужно воспроизвести видео после того, как пользователь нажимает кнопку «Воспроизвести». Я не могу использовать местоположение видео непосредственно в src тега <video>.

<video id="videoPlayer" controls autoplay></video>

У меня также есть класс VideoPlayer, который обрабатывает некоторую информацию, включая элемент видео.

function VideoPlayer(root, play) {
  this._play = play;
  this._root = root;
  this._root.style.display = "none";
}

Который создается с помощью:

const videoPlayer = new VideoPlayer(document.getElementById("videoPlayer"), document.querySelector("#play"));

Второй элемент, являющийся кнопкой воспроизведения.

Я также добавил к прототипу функции VideoPlayer a play:

VideoPlayer.prototype.play = function (url, immediate) {
  const root = this._root;
  const play = this._play;

  root.style.visibility = "visible";
  root.src = url;

  play.style.display = null;
  once(play, "click", function () {
    root.play();
  });

  return new Promise(function (resolve, reject) {
    function ok() {
      play.style.display = "none";
      root.style.display = null;
      clear();
    }

    function fail(error) {
      clear();
      reject(error);
    }

    function clear() {
      root.removeEventListener("play", ok);
      root.removeEventListener("abort", fail);
      root.removeEventListener("error", fail);
    }

    root.addEventListener("play", ok);
    root.addEventListener("abort", fail);
    root.addEventListener("error", fail);

    once(root, "ended", function () {
      root.style.display = "none";
      resolve();
    });
  });
};

И после того, как я наконец получу местоположение видео, которое это что-то вроде videos/video1.mp4 или videos/video2.mp4 Я вызываю функцию воспроизведения, используя:

const initialVideo = "videos/mov_bbb.mp4";
if (initialVideo.length > 0) {
    videoPlayer.play(initialVideo);
}

Точно после вызова функции выдается ошибка. После использования точек разрыва я отслеживал эту строку:

root.src = url;

Кажется, что проблема не возникает с внешними видео, я тестировал это видео из W3School: https://www.w3schools.com/html/mov_bbb.mp4, а затем загрузил видео, чтобы использовать его локально. Когда он внешний, он работает, когда он локальный, не ... бросает «Элемент не имеет поддерживаемых источников».

Я пытался экспортировать одно и то же видео, используя разные кодеки и расширения. Эта проблема возникает только на Chrome, Mozilla работает нормально. Я могу получить доступ к файлу через localhost: port / videos / mov_bbb.mp4, но он не воспроизводится. Я использую stati c -server-advance для обслуживания файлов. Но я также добавил на другой сервер, чтобы проверить его.

Моя chrome версия: 83.0.4103.10, и я не использую никаких расширений.

Я не могу используйте php или узел.