javascript - Youtube Blob url 在浏览器中不起作用，但在 src 中

Question

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

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 url 执行相同的操作，以便它们只能在 html 视频标签的 src 中工作并给出错误或在浏览器的外部选项卡/窗口中不起作用。我只是想知道这背后的技术和 blob 对象及其 url 属性。

Answer 1

这个问题对我来说似乎有些模糊，所以这是我的解释(也来自您问题中 fiddle 图像中的代码):

您收到 Blob (图像的二进制数据)通过 XMLHttpRequest() GET -请求 ( responseType = 'blob' )

您创建一个 Blob URL与 URL.createObjectURL()在 URL Store为 XMLHttpRequest() response -object(保存二进制数据的 Blob)

您设置结果 Blob URL -string as src用于图像(并将图像附加到文档中，从而显示您刚刚下载的图像)

您“不希望它在新选项卡中工作”(我假设“它”是 Blob URL -string)。

在您的评论中，您说:

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 时能够查看/下载 blob。 -string (通过检查实时源或简单地 right-click-on-image>>Copy Imagelocation )并将其粘贴到新的选项卡/窗口中(以 youtube 为例)。

但你也在谈论视频。

TL;博士:看来您的问题/赏金可能混淆了 window.URL.createObjectURL(); 返回的两种不同类型的 URL :

Blob URL 引用(表示的对象)“原始本地数据”(如 (Local-)File、Blob 等)
对于这些你想自动(或以编程方式)撤销 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 Object
这些网址是

仅用于链接 src的 HTMLMediaElement (想想 <audo> 和 <video> 元素)到特殊的 MediaSource Object注意:新标签/窗口不是 HTMLMediaElement

already automatically revoked
注意:即使它们是通过 window.URL.createObjectURL(); 创建的

以下是您问题图像中的 fiddle 以及将视频下载为 Blob 的类似代码的情况。 (您使用 xhr 在服务器上下载整个视频文件的数据/二进制文件)或任何其他“本地”数据:
您实际上是在使用“裸”“未增强” File-API . URL Store仅在 session 期间维护(因此它将在页面刷新后继续存在，因为它仍然是同一个 session )并在文档卸载时丢失。
因此，如果您的 fiddle 仍然打开，那么 fiddle-document(创建 Blob URL 的文档)显然尚未卸载，因此它是 Blob URL s 对浏览器(任何选项卡/窗口)可用，只要它没有被撤销!
这是一个相关的功能:您可以构建/下载/修改 Blob在浏览器中，创建一个 Blob URL并将其设置为 href到文件下载链接(用户可以右键单击并在新选项卡/窗口中打开!!)
关闭 fiddle 或撤销 Blob URL来自 URL Store和 Blob URL不再可访问(也不在不同的选项卡/窗口中)。

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

这是 <audio> 发生的事情或 <video>源链接到 MediaSource Object使用 MediaSource object URL返回者 window.URL.createObjectURL(MediaSource) :
Media Source Extensions (MSE)还扩展了 File-API的 window.URL.createObjectURL()接受 MediaSource Object . (目前的草稿) 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() 的程序员可以访问的 bool 标志而是为了这个目的。我想知道 Media-Source 规范何时会模仿它(并且为了向后兼容，将它们的 createObjectURL() 别名为新的 createFor() 扩展名(似乎更合适，因为它目前似乎打算如何工作))。

这些结果 自动撤销 URL 字符串 仅用于链接 src的 HTMLMediaElement (想想 <audo> 和 <video> 元素)到特殊的 MediaSource Object .
我不认为这是一个空的 Document (来自新选项卡/窗口)是 <audo>或 <video>元素。

也许“MSE 快速教程”(来源: MSDN)可能有助于澄清差异和基本用法:

To use the MSE API, follow these steps:

1. Define an HTML5 video element in the HTML section of a page.
2. Create a MediaSource object in JavaScript.
3. Create a virtual URL using createObjectURL with the MediaSource object as the source.
4. Assign the virtual URL to the video element's src property.
5. Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.
6. Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.
7. Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.
8. Call the play method on the video element.
9. Repeat step 7 until done.
10. Clean up.

您(或像 youtube 这样的大型播放器会动态选择支持的技术以在客户端平台上播放(因此无法确定您在谈论哪种 youtube 视频 URL))可能会使用新的特别节目 MediaSource Object播放视频(或音频)。
这为 HTML5 视频添加了基于缓冲区的源选项以支持流媒体(与在播放之前下载完整的视频文件或使用 Silverlight 或 Adob​​e Flash 等附加组件来流媒体相比)。

希望这就是你所追求的!