Question

我知道没有blob网址只有对象我为视频缓冲区创建了自己的blob对象，然后在视频标记的src中使用它，类似于 blob：//website.com/blablobbla 。我在浏览器中打开了这个网址

当我将youtube视频src（blob url）的url打开到一个新标签时它没有用，但是我的视频src（blob url）工作了

我想知道如何对我的blob网址执行相同操作，以便它们只能在html视频标记的src中工作，并在浏览器的外部选项卡/窗口中显示错误或不起作用。我只是想知道这个和blob对象及其url属性背后的技术。

Answer 1

这个问题对我来说似乎有些模糊，所以这就是我的解释（也来自你问题中小提琴图片中的代码）：

您通过Blob XMLHttpRequest() - 请求（GET）

responseType = 'blob'

您在Blob URL中为URL.createObjectURL() URL Store - 对象（XMLHttpRequest()持有二进制数据）<{1}}创建response < / LI>
您为图片设置了结果Blob - 字符串为Blob URL（并将图片附加到文档中，从而显示刚刚下载的图片）
您不希望它在新标签中工作＆＃34; （＆＃34;它＆＃34;是src - 我假设的字符串。）

在你的评论中，你说：

在小提琴中，我检查了图像并复制了src，然后将其粘贴到新标签中它工作并显示图像我不希望图像直接显示使用blob网址。
如果您转到youtube并在新标签中打开视频的src：它将无效，我希望这种情况发生

在我看来，不希望用户在复制Blob URL字符串时能够查看/下载blob（通过检查实时源或简单地{ {1}}）并将其粘贴到新的标签/窗口中（以youtube为例）。

但你也在谈论视频。

TL; DR：看来您的问题/赏金可能会混淆Blob URL返回的2种不同类型的网址：

Blob URL引用（代表的对象）＆＃39;原始本地数据＆＃39; （如（Local-）File，Blob等）
对于这些，您希望自动（或以编程方式）撤消来自浏览器的right-click-on-image>>Copy Imagelocation window.URL.createObjectURL();（您可以在浏览器中考虑简化的本地网络服务器，可用于该浏览器）。
- var myBlobURL=window.URL.createObjectURL(object, flag_oneTimeOnly);
  返回一个可重复使用的Blob URL，其中可以撤消： window.URL.revokeObjectURL(myBlobURL)（将URL Store字符串添加到Blob URL。） _{注意：曾经有一个第二个参数Blob URL，用于在Revocation List首次使用后自动撤销flag_oneTimeOnly，但目前不再是规范的一部分！此标志通常也无法正常工作（至少在firefox中）。}
- var myBlobURL=window.URL.createFor(object);
  返回Blob URL 在首次使用后自动撤消。
  _{注意：相当一些浏览器已经迟到了＃39;实现这个。}
MediaSource object URL引用特殊 MediaSource Object
这些网址是
- 仅用于将HTMLMediaElement {think Blob URL＆amp; src元素的<audo>与特殊<video>相关联 _{注意：新的标签/窗口不是MediaSource Object}
- already automatically revoked
  _{注意：即使它们是通过HTMLMediaElement}

以下是您问题的图片中出现的问题以及将视频下载为window.URL.createObjectURL();的类似代码（您下载了整个视频）服务器上的视频文件数据/二进制文件使用xhr）或任何其他本地＆＃39;数据
你基本上是在使用＆＃39; bare＆＃39; ＆＃39;未增强＆＃39; File-API。
Blob仅在会话期间维护（因此它将在页面刷新后继续存在，因为它仍然是同一会话）并在文档卸载时丢失。所以，如果您的小提琴仍处于打开状态，那么小提琴文档（创建URL Store的文档）显然不尚未卸载，因此它是Blob URL只要它没有被撤销，浏览器（任何标签/窗口）都可以使用！这是一个相关的功能：您可以在浏览器中构建/下载/修改Blob URL，创建Blob并将其设置为Blob URL到文件中 - 下载链接（用户可以右键单击并在新的选项卡/窗口中打开!!）
关闭小提琴或撤消href中的Blob URL，URL Store不再可访问（也不在其他标签/窗口中）。

尝试修改小提琴： https://jsfiddle.net/7cyoozwv/
在复制图像URL后（图像显示在页面中），现在不再可能将样本图像加载到不同的选项卡/窗口中了。
这里我手动撤销了URL（Blob URL），因为它是目前最好的跨浏览器方法（部分原因是api尚未完全稳定）。
另请注意：元素的revokeObjectURL()事件可以是撤消onload的优雅场所。

以下是使用Blob URL返回的<audio>链接到<video>的{{1}}或MediaSource Object来源所发生的情况：
Media Source Extensions (MSE) 还扩展 MediaSource object URL window.URL.createObjectURL(MediaSource)以接受File-API。（{3}}的（当前草案）指定：


此算法旨在镜像autoObjectURL（）[FILE-API]方法的行为，并将autoRevoke设置为true。

^{请注意，window.URL.createObjectURL() MediaSource Object 不再的当前规范有File API（或{{1} }）boolean标志可供程序员访问，而程序员应该使用window.URL.createObjectURL()来实现此目的。我想知道Media-Source规范何时会模仿（以及向后兼容性别名为autoRevoke到新的flag_oneTimeOnly扩展名（看起来更合适，因为它似乎是目前的工作方式））。功能}

由此产生的自动撤销的网址字符串 仅用于以链接window.URL.createFor()的{{1}}（想createObjectURL()＆amp; ; createFor()元素）到特殊src _{我不认为空HTMLMediaElement（来自新标签/窗口）是<audo>或<video>元素。}

也许＆＃34;关于MSE＆＃34; ^{（来源：URL Object Extension）}的快速教程可能有助于澄清差异和基本用法：


要使用MSE API，请按以下步骤操作：


在页面的HTML部分中定义HTML5 MediaSource Object元素。

在JavaScript中创建Document对象。

使用<audo>对象作为来源创建虚拟URL。

将虚拟URL分配给视频元素的<video>属性。

使用video创建MediaSource，并添加您要添加的视频的mime类型。

在线获取媒体文件中的视频初始化细分，然后将其createObjectURL添加到MediaSource。

从媒体文件中获取视频数据片段，并使用src将其附加到SourceBuffer。

在视频元素上调用addSourceBuffer方法。

重复步骤7直至完成。

清理。


您（或像youtube这样的大型播放器会动态选择支持的技术在客户端平台上播放（因此无法确定哪种类型的YouTube视频网址是您的？正在谈论））可以使用新的特殊SourceBuffer来播放视频（或音频）。
这为HTML5视频添加了基于缓冲区的源选项以支持流媒体支持（与在播放之前下载完整的视频文件或使用Silverlight或Adobe Flash等插件来流媒体相比）。

希望这就是你所追求的！

Answer 2

实际上，您引用的网址只是"string"对BLOB本身的引用（使用函数window.URL.createObjectURL创建）;因此，您可以像普通网址一样使用它。并且，范围也仅在文档卸载之前。

因此，我不认为您可以使用浏览器打开网址。而且我也尝试重新创建你所说的但无济于事（在我自己的网站上，创建一个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();

小提琴here

更新：

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

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

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

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

2 个答案: