☰

下载 Blob 视频

tag-icon • tag-icon video download
下载 Blob 视频

我一直想从 ysl.com 下载一些视频用于个人项目。遗憾的是，标准视频下载器无法成功下载该网站使用的格式。

这里有一个示例链接：https://www.ysl.com/ch/shop-product/unisex/fw14campaign_section

在链接中的第二个视频中，我找到了 blob：https://www.ysl.com/6dd723d0-4c79-40d3-a828-a86d22736b51

但是，我不知道我能做什么；我尝试了各种扩展并尝试了各种来源，但从未成功。

如果有人有任何建议，我将不胜感激 - 我并不是想盗版或做非法的事情，我只是发现视频并不总是正确加载，所以下载它们是更好的选择。

谢谢。

答案1

也许这种方法也适用于其他 blob 视频，但需要更多包含此类视频的页面来测试它。对于您的情况，您可以执行以下操作。

安装适用于基于 Chromium 的浏览器的扩展Adobe HDS / HLS 视频保存器。

之后，打开这一页，点击扩展图标，然后点击   DOWNLOAD   按钮。

在此处输入图片描述

如果显示禁止标志，请播放一小段视频并暂停。然后您就可以单击它，扩展程序的页面将打开。在这种情况下，您可以看到两个链接。

在此处输入图片描述

如果您单击其中任何一个，都会打开一个下拉列表，其中有多个可下载的选项。

在此处输入图片描述

向下滚动，列表将显示不同的下载选项，从低分辨率到高分辨率。

在此处输入图片描述

点击所需的分辨率，视频片段将开始下载，并由扩展程序合并。结果显示为下载名称，video.ts因此您可能需要为其指定一个完整名称。

在此处输入图片描述

答案2

Blob 是已下载内容的副本，因此无需再次下载。与文本数据相反，Blob 是二进制数据，因此比文本或文本编码数据小得多（在 JavaScript 中每个字符占用两个字节）。Blob 的另一个好处是，由于数据已经下载，浏览器无需向原始服务器发送多个请求来呈现相同的内容。

相反，服务器会打包内容以及任何需要添加更多内容的指令（在客户端），发送到浏览器（客户端），浏览器会在客户端呈现内容并处理任何内容更新，从而减轻服务器的额外流量或工作量。Blob 的根源在于数据库，数据库发展为将数据存储为二进制对象，其原因也同样是为了提高效率。在动态网页成为头条新闻、客户端脚本成为主流的时代，Blob 的起源已经很明显了。

与指向数据源的 URL 不同，blob 本身是数据/资源，可以简单到只是字节数组或单个文件。要从 blob 中提取数据以在浏览器中呈现，请将 blob 传递给以URL.createObjectURL()在浏览器中创建“blob URL”，格式例如
blob:[protocol]://[server].[domain]/[blob ID]
。blob:https://thenewsit.com/345a291c-ac2e-456a-a202-2a8f131327ea

然后，此 URL 将成为数据源（例如，提供给srcHTML 标签或元素的属性以在浏览器中呈现），而无需服务器参与。

下面是创建 blob、从中提取数据并在浏览器上显示的示例：

HTML

 <input type="file" id="fileItem" onchange="onChange()">
 <video></video>
 <br><label id="blob"></label>

JavaScript

function onChange() {
  var file = document.getElementById('fileItem').files[0];
  var vid = document.getElementsByTagName('video')[0];
  var url = URL.createObjectURL(file);

  document.getElementById('blob').innerHTML = "Blob URL is:<br>".concat(url); 
  document.getElementById('fileItem').type = "hidden";

  vid.src = url;
  vid.load();
  vid.onloadeddata = function() {
    vid.play();
  }
}

XHR 示例 blob：

 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'doby.mp4', true);
 xhr.responseType = 'blob';
 xhr.onload = function(e) {
   var blob = this.response;
   var vid = document.getElementsByTagName('video')[0];
   vid.src = URL.createObjectURL(blob);
   vid.load();
   vid.onloadeddata = function() {
     vid.play();
   }
 };
 xhr.send();

要在较新的浏览器上访问 Blob 数据：

  video.srcObject = blob;

测试于jsfiddle

相关内容