HTML5 视频源作为本地存储的 blob 不再工作

从 Chrome 80 开始，Blob 或 IndexedDB 的工作方式似乎发生了变化。

将视频文件作为 blob 加载并通过 createObjectURL 将其分配给 HTML5 Video 元素仍然有效：

// load the blob through XMLHttprequest
RequestAsBlob("https://devserver/some-video.mp4",
function(blob)
{
  video.src = URL.createObjectURL(blob); 

  // same above, video.src is now "blob:https://devserver/36e15718-e597-4859-95d3-6bc39daaa999"
}

video.play();

Output: 承诺 {}而且视频播放得很好。

检查 blob，它看起来像这样：

Blob {size: 6752122, type: "video/mp4"}
size: 6752122
type: "video/mp4"
__proto__: Blob
arrayBuffer: ƒ arrayBuffer()
size: (...)
slice: ƒ slice()
stream: ƒ stream()
text: ƒ text()
type: (...)
constructor: ƒ Blob()
Symbol(Symbol.toStringTag): "Blob"
get size: ƒ size()
get type: ƒ type()
__proto__: Object

我曾经将 blob 存储到 IndexedDB（通过 LocalForage），然后检索它并回放，如下所示。这个，不再

// blob is a blob fetched from indexedDB
video.src = URL.createObjectURL(blob);  

// video.src is now something like this:
// "blob:https://devserver/ec5e1dfe-0884-40e2-ae8c-c6062734d297"

video.play();

检查检索到的 blob，它看起来与 XMLHttpRequest 返回的一模一样

但是，它不起作用：

Output: 未捕获（承诺中）DOMException：该元素没有受支持的源。

我不明白是什么变化破坏了迄今为止一直有效的功能。 事情变得更奇怪了：

如果我得到存储的 blob，显然不能再直接将其分配给视频 src，我会这样做......

var url = URL.createObjectURL(cachedblob);

RequestAsBlob(url,
function(blob)
{
 var url = URL.createObjectURL(blob);

 video.src = url;
 video.play();
}

这有效！我正在引用存储在indexedDB中的一个blob，为其创建一个url，通过XMLHttpRequest再次加载它，就像它实际上位于某个远程位置一样，再次将其作为blob接收......并再次为其创建一个URL ...并且它有效。

这个不成立。 我希望有人能对此有所启发。

可以重现，即使在金丝雀构建（82）中，你也做了很好的开场这个问题.

现在，有比通过 XHR 获取更简单的解决方法，例如在稳定 (80) 中，您只需将检索到的 Blob 包装在一个新的 Blob 中：

video.src = URL.createObjectURL(new Blob( [ blob ] ) ); 

As a fiddle因为 StackSnippet™ 不允许访问 IndexedDB。

然而，这种解决方法似乎只适用于稳定版本 (80)，在 Canary (82) 上，我们需要实际将整个 Blob 读取到 ArrayBuffer 并从该 ArrayBuffer 构建一个新的 Blob：

const buf = await blob.arrayBuffer();
vid.src = URL.createObjectURL( new Blob( [ buf ] ) );

fiddle.
由于后者也适用于稳定版本，并且我们不知道他们何时能够修复该错误，因此您可能需要使用第二种解决方法。

^{1: or let me know if you want me to do it.}