Question

我知道这是一个已被问过很多次的问题，但是在“类似问题”上搜索了很长时间之后，似乎没有一个问题可以解决我的问题。这是我的情况：

我需要在用户单击“播放按钮”后播放视频。我无法直接在src标签上的<video>上使用视频的位置。

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

我还有一个VideoPlayer类，可以处理一些信息，包括video元素。

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或node。

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

0 个答案: