通过 createObjectURL 的 Blob 视频不起作用

Question

我正在尝试制作一个 HTML 文件，我可以在其中上传本地视频文件，或放置视频文件的链接，并将其嵌入 HTML 中。问题是，上传视频文件会导致一个完全空的 blob 视频：0:00 持续时间；完全变灰。

我检查了嵌入不是问题（我去了 blob:null 链接本身，但它不起作用）并且视频文件不是问题（将文件的路径放在文本中bar 并且它有效）所以问题似乎是 createObjectURL 函数。如果您好奇，视频文件是一个 .mp4 文件。

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
      var new_embed = document.createElement("EMBED");
      new_embed.setAttribute("src", URL.createObjectURL(this.files[0]));
      alert(URL.createObjectURL(this.files[0]));
      new_embed.setAttribute("style", "width:100%; height: 100%;");
      document.getElementById("player-theater-container").appendChild(new_embed);
          var butte = document.getElementById("inputer");
          butte.remove();
          butte = document.getElementById("texbax");
          butte.remove();
      }
  });

  document.getElementById("texbax").addEventListener('change', function() {
      var new_embed = document.createElement("EMBED");
      new_embed.setAttribute("src", this.value);
      new_embed.setAttribute("style", "width:100%; height: 100%;");
      document.getElementById("player-theater-container").appendChild(new_embed);
          var butte = document.getElementById("inputer");
          butte.remove();
          butte = document.getElementById("texbax");
          butte.remove();
  });
});

Answer 1

那将是 Firefox 的错误，这段代码在 Chrome 中运行良好，在 FF 中也应该运行：

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var new_embed = document.createElement("EMBED");
      new_embed.setAttribute("src", URL.createObjectURL(this.files[0]));
      new_embed.setAttribute("style", "width:100%; height: 100%;");
      document.getElementById("player-theater-container").appendChild(new_embed);
      var butte = document.getElementById("inputer");
      butte.remove();
      butte = document.getElementById("texbax");
      butte.remove();
    }
  });

  document.getElementById("texbax").addEventListener('change', function() {
    var new_embed = document.createElement("EMBED");
    new_embed.setAttribute("src", this.value);
    new_embed.setAttribute("style", "width:100%; height: 100%;");
    document.getElementById("player-theater-container").appendChild(new_embed);
    var butte = document.getElementById("inputer");
    butte.remove();
    butte = document.getElementById("texbax");
    butte.remove();
  });
});

<input id="texbax">
<input type="file" id="inputer">
<div id="player-theater-container"></div>

但这里没有理由使用 元素，只需使用 <video> 即可在任何地方完成工作。

document.querySelector('input[type="file"]').addEventListener('change', function() {
  const file = this.files[0];
  const url = URL.createObjectURL( file );
  loadVideo( url );
});

document.getElementById("texbax").addEventListener('change', function() {
    const url = this.value;
    loadVideo( url );
});

function loadVideo( url ) {
  const new_vid = document.createElement("video");
  new_vid.src = url;
  new_vid.controls = true;
  new_vid.style.cssText = "width:100%; height: 100%;";
  document.getElementById("player-theater-container").appendChild(new_vid);
  document.getElementById("inputer").remove();
  document.getElementById("texbax").remove();
}

<input id="texbax">
<input type="file" id="inputer">
<div id="player-theater-container"></div>