Youtube Blob 网址在浏览器中不起作用，但在 src 中起作用

Question

我知道没有 blob url 只有对象。
我为视频缓冲区制作了自己的 blob 对象，然后在视频标签的 src 中使用它，类似于 blob://website.com/blablobbla 。我在浏览器中打开了它 url

when I opened the url of youtube video src (blob url) into a new tab it did't work but mine video src (blob url) worked

我想知道如何对我的 blob urls 做同样的事情，以便它们只在 html 视频标签的 src 中工作，并给出错误或不工作browsers.I 的外部 tab/window 只想了解这背后的技术和 blob 对象及其 url 属性。

Answer 1

实际上，您所指的 URL 只是 "string" 对 BLOB 本身的引用（它是使用函数 window.URL.createObjectURL 创建的）；因此，您可以像正常使用它一样使用它 URL。而且，范围也仅限于文件被卸载。

因此，我认为您无法仅使用浏览器打开 URL。我还尝试重新创建您所说的但无济于事（在我自己的网站上，创建一个 blob 并将 URL 放入浏览器）。

下面是代码

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://kurrik.github.io/hackathons/static/img/sample-128.png");
xhr.responseType = "blob";
xhr.onload = function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   console.log(imageUrl);
   var imgDOM = document.createElement("img");

   imgDOM.src = imageUrl;
   document.getElementById("divImage").appendChild(imgDOM);
};
xhr.send();

fiddle here

更新：

好的，我看了之后。好像 youtube 正在使用 media-source 来流式传输视频。

我还没有更新 fiddle（找不到我可以使用的视频）。但是，基本上，它仍然使用相同的函数 (createObjectURL) 来创建 blob URL。但是，不是使用源（图像、视频等）传递给函数。您应该将 MediaSource 对象传递给函数。

然后，您使用 blob URL 并将其传递到 video.src。因此，当您尝试打开 blob link 时。您应该无法再看到该视频。

Answer 2

这个问题对我来说似乎有些模糊，所以这是我的解释（也是从您问题中 fiddle-images 中的代码）：

您通过 XMLHttpRequest() GET-请求 (responseType = 'blob')

Blob

您在 URL Store 中为 XMLHttpRequest() response 创建一个 Blob URL 和 URL.createObjectURL() - 对象（Blob 保存二进制数据)
您将生成的 Blob URL-字符串设置为图像的 src（并将图像附加到文档，从而显示您刚刚下载的图像）
你 "don't want it to work in new tab"（"it" 是我假设的 Blob URL 字符串）。

在您的评论中您说：

In fiddle I inspected the image and copied the src and then pasted it in new tab and it worked and showed the image I don't want the image to be shown directly with the blob url.
If you go to youtube and open the src of video in new tab : It will not work,, I want this to happen

在我看来，您不希望用户在复制Blob URL字符串时能够view/download blob（通过检查实时源或简单地 right-click-on-image>>Copy Imagelocation) 并将其粘贴到新的 tab/window（您以 youtube 为例）。

但是你也在谈论视频。

TL;DR: 看来您的 question/bounty 可能混淆了 window.URL.createObjectURL(); 返回的 2 种不同类型的 URL：

Blob URL 引用（表示的对象）'raw local data'（如（本地）文件、Blob 等）
对于这些，您希望自动（或以编程方式）从浏览器的 URL Store 中撤销 Blob URL（您可以考虑在浏览器中使用简化的本地网络服务器，仅可用到那个浏览器）。
- var myBlobURL=window.URL.createObjectURL(object<del>, flag_oneTimeOnly</del>);
  returns 可重复使用的 Blob URL 可以通过以下方式撤销： window.URL.revokeObjectURL(myBlobURL)（将 Blob URL 字符串添加到 Revocation List).
  _{注意：曾经有第二个参数 flag_oneTimeOnly 用于在首次使用后自动撤销 Blob URL，但目前不再是规范的一部分！此外，此标志通常不起作用（至少在 Firefox 中）。}
- var myBlobURL=window.URL.createFor(object);
  returns Blob URL 首次使用后 自动撤销。
  _{注意：相当多的浏览器 'late' 实现了这个。}
MediaSource object URL referencing a special MediaSource Object
这些 URL 是
- 只打算linksrc的一个HTMLMediaElement（想想<audo>&<video>元素）到特殊的MediaSource Object
  _{注意：新的 tab/window 不是 HTMLMediaElement}
- already automatically revoked
  _{注意：即使它们是通过 window.URL.createObjectURL();}

这是您问题图片 中的 fiddle 以及将视频下载为 Blob 的类似代码（您下载整个视频的地方 -服务器上的文件 data/binary 使用 xhr) 或任何其他 'local' 数据：
您实际上是在使用 'bare' 'un-enhanced' File-API.
URL Store 仅在会话期间保留（因此它将在页面刷新后继续存在，因为它仍然是同一个会话）并在卸载文档时丢失。
因此，如果您的 fiddle 仍处于打开状态，那么 fiddle-文档（创建 Blob URL 的文档）显然 not 尚未卸载，并且因此它的 Blob URL 对浏览器可用（任何 tab/window）只要它没有被撤销！
这是一个相关的功能：您可以在浏览器中 build/download/modify 一个 Blob，创建一个 Blob URL 并将其设置为 href 以文件下载 link（用户可以右键单击并在新的 tab/window 中打开！！）
关闭 fiddle 或从 URL Store 撤销 Blob URL 并且 Blob URL 不再可访问（也不在不同的 tab/window 中）。

尝试修改后的 fiddle: https://jsfiddle.net/7cyoozwv/
在此 fiddle 中，复制图像 url 后（一旦图像显示在您的页面中），现在应该无法再将示例图像加载到不同的 tab/window 中。
这里我手动撤销了URL（revokeObjectURL()），因为它是目前最好的跨浏览器方法（部分原因是api还没有完全稳定）。
另请注意：元素的 onload 事件可以是撤销 Blob URL.

的优雅位置

这是 <audio> 或 <video> 源 link 使用 MediaSource object URL 返回的 MediaSource Object 发生的情况window.URL.createObjectURL(MediaSource):
Media Source Extensions (MSE) also extend the File-API's window.URL.createObjectURL() to accept a MediaSource Object. The (current draft of the) URL Object Extension 指定：

This algorithm is intended to mirror the behavior of the createObjectURL()[FILE-API] method with autoRevoke set to true.

^{请注意 File API 的 window.URL.createObjectURL() 的当前规范不再有 autoRevoke（或flag_oneTimeOnly) 应该使用 window.URL.createFor() 的程序员可以访问的布尔标志。我想知道 Media-Source 规范何时会模仿它（并且为了向后兼容，将它们的 createObjectURL() 别名为新的 createFor() 扩展（似乎更合适，因为这似乎是目前打算工作的方式）） .}

这些自动撤销的URL字符串 仅用于到link src 的一个 HTMLMediaElement（想想 <audo> & <video> 元素）到特殊的 MediaSource Object.
_{我不认为空的 Document（来自新的 tab/window）是 <audo> 或 <video> 元素。}

也许 "A quick tutorial on MSE"^{（来源：MSDN）} 可能有助于阐明区别和基本用法：

To use the MSE API, follow these steps:

Define an HTML5 video element in the HTML section of a page.

Create a MediaSource object in JavaScript.

Create a virtual URL using createObjectURL with the MediaSource object as the source.

Assign the virtual URL to the video element's src property.

Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.

Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.

Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.

Call the play method on the video element.

Repeat step 7 until done.

Clean up.

您（或像 youtube 这样的大型播放器将动态 select 支持在客户端平台上播放的技术（因此无法确定哪种类型的 youtube 视频 URL是你说的））可以使用新的特殊功能MediaSource Object来播放视频（或音频）。
这为 HTML5 视频添加了基于缓冲区的源选项以支持流式传输（与在播放前下载完整的视频文件或使用 Silverlight 或 Adobe Flash 等附加组件流式传输媒体相比）。

希望这就是您想要的！

Youtube Blob 网址在浏览器中不起作用，但在 src 中起作用

Youtube Blob urls don't work in browsers but in src

javascript

url

blob

fileapi

media-source