通过 createObjectURL 的 Blob 视频不起作用

Question

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

我已经检查过嵌入不是问题（我去了 blob:null link 本身但它不起作用）并且视频文件不是问题（把文本栏中文件的路径并且有效）所以问题似乎出在 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>

通过 createObjectURL 的 Blob 视频不起作用

Blob video via createObjectURL does not work

javascript

blob