javascript - 稍后在执行时分配视频时，该元素没有支持的来源

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一个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 访问该文件，但它无法播放。我正在使用 static-server-advance 来提供文件。但我也添加到不同的服务器来测试它。

我的 chrome 版本是：83.0.4103.10，我没有使用任何扩展。

我无法使用 php 或节点。

标签： javascriptvideo