4

I have been trying to get a couple of videos from ysl.com for a personal project. Unfortunately standard video downloaders don't have much success on the formats the site uses.

One example link here: https://www.ysl.com/ch/shop-product/unisex/fw14campaign_section

In the second video from the link, I was able to find blob:https://www.ysl.com/6dd723d0-4c79-40d3-a828-a86d22736b51

However, I don't know what I could do from there; I've tried various extensions and playing around with sources but never found success.

If anyone has any advice I would appreciate it very much—I am not trying to pirate or do illegal things, I just find the videos don't always load correctly so downloading them would be preferable.

Thank you.

db28
  • 41
  • 1
  • 1
  • 2

2 Answers2

2

Maybe this method works also with another blob videos, but more pages with this kind of videos would be needed to test it. In your case, here's what you can do.

Install the extension for Chromium-based browsers Adobe HDS / HLS Video Saver.

After that, open the page, click on the extension icon and then on the    DOWNLOAD    button.

enter image description here

If it shows you a forbidden sign, play a little of the video and pause it. Then you will be able to click it and the page of the extension will open. In this case, you can see two links.

enter image description here

If you click on any of them, a drop-down list will open with several options to download.

enter image description here

Scrolling down, the list will show different options to download, from lower to higher resolution.

enter image description here

Click on the desired resolution and the chunks of the video will begin to download and will be joined by the extension. The result appears as a download named video.ts so you may want to give it a comprehensive name.

enter image description here

cdlvcdlv
  • 1,739
0

A blob is a copy of content that has already been downloaded, so there's no need to download again. As opposed to text data, a blob is binary data and therefore is much smaller (each char takes two bytes in JavaScript) than text or text encoded data. Another benefit of blob is since data has been already downloaded, the browser doesn't need to send multiple requests to the originating server to render the same content.

Instead, the server packages content and any instructions for further content to be added (at client side), sends to browser (client) which renders content & handles any content update on client side, relieving server from additional traffic or workload. Blobs have their roots in databases, which evolved to store data as binary objects, for the very same reasons of efficiency. The beginnings of blobs were already evident in the days when dynamic webpages were making headlines and client side scripting became a thing.

A blob itself is data/resource, as opposed to a URL which points to source of data, and can be as simple as an array of bytes or a single file. To extract data from a blob for rendering in a browser, pass the blob to URL.createObjectURL() to create a 'blob URL' in the browser, of the form
blob:[protocol]://[server].[domain]/[blob ID]
eg. blob:https://thenewsit.com/345a291c-ac2e-456a-a202-2a8f131327ea

This URL then becomes the source of data eg. fed to src attribute of html tags or elements for rendering in the browser, without involving the server.

Here's an example to create a blob, extract data from it & display on browser:

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 example 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();

To access blob data on newer browsers:

  video.srcObject = blob;

Tested in jsfiddle

Zimba
  • 1,291