时间戳

首页 > 解决方案 > 通过 createObjectURL 的 Blob 视频不起作用

javascript - 通过 createObjectURL 的 Blob 视频不起作用

问题描述

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

我已经检查过嵌入不是问题（我去了 blob:null 链接本身，但它不起作用）并且视频文件不是问题（将文件的路径放在文本栏中，然后工作）所以问题似乎是 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();
  });
});

标签： javascriptblob

解决方案

那将是一个 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>

但是这里没有理由使用 <embed> 元素，只需使用<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>

推荐阅读