<video src=blob:url> 中的 blob 是什么？答案

【问题标题】：What is blob in the <video src=blob:url>?<video src=blob:url> 中的 blob 是什么？
【发布时间】：2016-01-28 02:31:53
【问题描述】：

谁能解释一下blob: 在这个视频标签的 URL 中表示什么？

<video class="" 
       style="width: 640px; height: 360px; left: 0px; top: 0px; transform: none; opacity: 1;" 
       src="blob:https://www.youtube.com/5c42620b-a028-451b-9b64-424996802355">
</video>

【问题讨论】：

标签： url youtube

【解决方案1】：

这是一个带有 shaka player 的 youtube 视频，它使用 Media Source Extensions 播放没有浏览器插件的 DASH 内容。

blob url 由createObjectURL 生成。例如：

var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource;
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

【讨论】：

我看不懂上面的代码，assetURL根本没用，怎么把blob URL翻译成实际的视频URL？
这里好像少了一个步骤。 assetURL 只定义一次，从未与mediaSource 一起使用。我在这里看到的只是一个空白视频。而sourceOpen()的定义是什么？
我认为我们不应该理解代码：YouTube 显然想让在浏览器之外访问视频变得尽可能困难。在恰好是 URL 的字符串参数上调用 URL.createObjectURL 只是在其前面放置“blob:”；我认为我们不应该知道他们为什么要这样做。
@BradenBest 完整示例可在 MDN 上找到：developer.mozilla.org/en-US/docs/Web/API/MediaSource#Examples

【解决方案2】：

这表明该 url 是使用URL 对象的createObjectURL 静态方法创建的一个File 或MediaSource 对象，它返回一个url，它代表参数给定的对象。（见MDN - URL.createObjectURL）

您可以在控制台中尝试console.log(URL.createObjectURL(new MediaSource()));，以证明它创建了一个“blob:https://...(url)...”。但是，您通常会将video 元素的src 属性设置为引用创建的对象url，它本身就是对MediaSource 对象的引用。然后，您可以使用 XMLHttpRequest 获取视频资产的流，并将响应作为缓冲区附加到 MediaSource 对象，您可以从 live demo 中了解具体细节https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Examples .. 这可以更好地控制流，例如，您可以使用它来实现播放速度和视频质量调整等功能。

但从我所读到的内容来看，这是旧的做事方式，并且最终会从较新的浏览器中删除支持（请参阅“browsers are removing support for doing this”）。新方法是只设置video 元素的srcObject 属性以直接引用MediaSource 对象，而不必执行使用URL.createObjectURL 创建对象url 的中间步骤（参见MDN - srcObject attribute） ..

【讨论】：

【解决方案3】：

blob 是表示不可变原始二进制数据的高级对象。

See examples in javascript and HTML tags

Blob intreface W3 definition

【讨论】：