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

Question

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

当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了

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

Answer 1

这个问题对我来说似乎有点模糊,所以这就是我的解释(也来自你问题中小提琴图像中的代码):

• 你Blob通过XMLHttpRequest() GET-request(responseType = 'blob')收到(图像的二进制数据)
• 你在for -object中创建一个Blob URLwith (持有二进制数据)URL.createObjectURL()URL StoreXMLHttpRequest() responseBlob
• 您将结果Blob URL-string 设置src为图像(并将图像附加到文档,从而显示刚刚下载的图像)
• 你"不希望它在新标签中工作"("它"是Blob URL我假设的-string).

在你的评论中你说:

• 在小提琴中,我检查了图像并复制了src然后将其粘贴到新标签中,它工作并显示图像我不希望图像直接用blob url显示.

• 如果你去youtube并在新标签中打开视频的src:它将不起作用,我希望这发生

在我看来,你不希望用户在复制Blob URL-string时(通过检查实时源或简单地right-click-on-image>>Copy Imagelocation)查看/下载blob 并将其粘贴到新的选项卡/窗口中(为此你可以为你提供)举个例子).

但你也在谈论视频.

TL; DR:看来你的问题/赏金可能混合了2种不同类型的URL返回window.URL.createObjectURL();:

• Blob URL引用的对象(代表)"原始的本地数据"(如(局地)文件,斑点等),
  对于这些要自动(或程序)撤销了Blob URL从浏览器的URL Store(你可以考虑内部简化本地网络服务器浏览器,仅适用于该浏览器).
  • var myBlobURL=window.URL.createObjectURL(object, flag_oneTimeOnly);
    返回一个可重用的Blob URL,可以通过以下方式撤销:( window.URL.revokeObjectURL(myBlobURL)将Blob URL字符串添加到Revocation List).
    _{注意:曾经有过第二个参数flag_oneTimeOnly,用于Blob URL在第一次使用后自动撤销,但目前不再是规范的一部分!此标志通常也无法正常工作(至少在firefox中).}
  • var myBlobURL=window.URL.createFor(object);
    返回一个Blob URL是它是第一次使用后自动撤销.
    _{注意:相当一些浏览器实施这个浏览器"迟到".}
• MediaSource object URL引用特殊的 MediaSource对象
  这些URL是
  • 仅用于链接src的HTMLMediaElement(想<audo>和<video>元素)的特殊MediaSource Object
    _{注意事项:一个新的标签/窗口不是HTMLMediaElement}
  • 已经 自动撤销
    _{注意:即使它们是通过创建的window.URL.createObjectURL();}

以下是您的问题图像和下载视频的类似代码Blob(使用xhr在服务器上下载整个视频文件的数据/二进制文件)或任何其他"本地"数据时所发生的事情:
您实际上是在使用'裸''未增强'的文件API.
在URL Store会话期间只维持(所以它会生存页面刷新,因为它仍然是同一个会话),该文件被卸载时,会丢失.
所以,如果你的提琴仍处于打开状态,然后小提琴文档(创建该文件Blob URL),显然不是尚未卸载,因此它是Blob URLs的提供给浏览器(任何标签/窗口),只要它没有被撤销!
这是一个相关的功能:您可以Blob在浏览器中构建/下载/修改a ,创建Blob URL并设置href文件下载链接(用户可以右键单击并在新的选项卡/窗口中打开!!)
关闭小提琴或撤销Blob URL来自URL Store和Blob URL不再可访问(也不在不同的选项卡/窗口中).

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

这是发生了什么的<audio>或<video>源链接到MediaSource Object使用MediaSource object URL的返回window.URL.createObjectURL(MediaSource):
该媒体来源扩展(MSE) 也延长了File-API的window.URL.createObjectURL()接受MediaSource Object.URL对象扩展的(当前草案)指定:

此算法旨在镜像autoObjectURL()[FILE-API]方法的行为,并将autoRevoke设置为true.

^{请注意,File APIs 的当前规范window.URL.createObjectURL() 不再具有autoRevoke(或flag_oneTimeOnly)布尔标志,而程序员应该可以使用window.URL.createFor()它来代替此目的.我想知道Media-Source规范什么时候会模仿它(并且为了向后兼容别名它们createObjectURL()是一个新的createFor()扩展(看起来更合适,因为它似乎是目前的工作方式)).}

这些导致自动撤销URL串是只打算来链接src的HTMLMediaElement(想<audo>和<video>元素)的特殊MediaSource Object.
_{我不认为空Document(从新的选项卡/窗口)是一个<audo>或<video>元素.}

也许"关于MSE的快速教程" ^{(来源:MSDN)}可能有助于澄清差异和基本用法:

要使用MSE API,请按照下列步骤操作:

1. video在页面的HTML部分中定义HTML5 元素.
2. MediaSource在JavaScript中创建一个对象.
3. 创建使用虚拟URL createObjectURL与MediaSource对象作为源.
4. 将虚拟URL分配给视频元素的src属性.
5. SourceBuffer使用addSourceBuffer您添加的视频的mime类型创建一个使用.
6. 从在线媒体文件中获取视频初始化段并将其添加到SourceBufferwith appendBuffer.
7. 获取视频数据的段从媒体文件,将它们附加到SourceBuffer用appendBuffer.
8. play在视频元素上调用方法.
9. 重复步骤7直到完成.
10. 清理.

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

希望这就是你所追求的!

Answer 2

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

所以,我认为您不可能只使用浏览器打开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();

这里的小提琴

更新:

好吧,看了之后.似乎youtube正在使用媒体源来流式传输视频.

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

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