How to set the download file extension for blob data

Question

In my site video use the blob data, when the video was downloaded, the saved filename is the blob name with .txt(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt) extension in Chrome borwser, while in firefox is with .mp4(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4) extension.

How can I specific the download file extension and the filename.

I've tried to set it with below code, but none works.

    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"

Here is the sample code, I use now.

<video 
    width="300px"
    id="video"
    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"
    controls=""
    src="blob:http://localhost/4671addc-3ce0-4eb6-b414-ddf3406b1fe5">
</video>

Snowberry

Use the download for data uri works as the question Is there any way to specify a suggested filename when using data: URI? shows. But not works here for the blob uri. – Snowberry

Solution in How to set name of file downloaded from browser? also not works here. – Snowberry

How to modify the internal media controls download event of video tag? – Snowberry

Solve by specific the blob type when create the blob data. var blob = new Blob([buffer],{'type': 'video/mp4'}) – Snowberry

Answer 1

using HTML5 download attribute download the Blob URL file

Notice

download attribute only for HTML5 a or area tag ✅

download attribute not exist on HTML5 video tag ❌

download Blob URL image

<section>
  <img id="img" />
  <a id="img-link" download>...loading</a>
</section>

// ES5
function generatorBlobURL(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(res) {
    var blob = new Blob(
      [xhr.response],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    // render `blob` url ✅
    dom.src = urlBlob;
    // using `a` tag download ✅
    link.href = urlBlob;
    link.innerText = urlBlob;
    link.download = filename;
  };
  xhr.send();
}

(function() {
  var type = 'image/png';
  var url = 'https://cdn.xgqfrms.xyz/logo/icon.png';
  var dom = document.querySelector('#img');
  var link = document.querySelector('#img-link');
  var arr = url.split('/');
  var filename = arr[arr.length - 1] || 'default-filename';
  generatorBlobURL(url, type, dom, link, filename);
})();

download Blob URL video

<section>
  <video id="video" controls width="400" height="300">
    loading...
  </video>
  <br>
  <a id="video-link" download>...loading</a>
</section>

// ES5
function generatorBlobURL(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(res) {
    var blob = new Blob(
      [xhr.response],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    // render `blob` url ✅
    dom.src = urlBlob;
    // using `a` tag download ✅
    link.href = urlBlob;
    link.innerText = urlBlob;
    link.download = filename;
  };
  xhr.send();
}

(function() {
  var type = 'video/mp4';
  var url = 'https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4';
  var dom = document.querySelector('#video');
  var link = document.querySelector('#video-link');
  var arr = url.split('/');
  // arr.at(-1);
  var filename = arr[arr.length - 1] || 'default-filename';
  setTimeout(() => {
    generatorBlobURL(url, type, dom, link, filename);
  }, 0);
})();

live demo

https://codepen.io/xgqfrms/full/YzYRLwg

screenshots

refs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

Prelatism

This is an image blob. Video is not like this, video download is from the video player. – Snowberry

HTML5 download attribute is designed for a tag, not for the video tag; you should create your custom event handler or wrap it using a tag. – Prelatism

try this lib https://videojs.com/ – Prelatism

What if we don't know the file extension exactly. Is it possible to specify file extension based on the received blob? – Jase

@AliBaghban Of course! for more details see this demo codepen.io/xgqfrms/full/ExEgKjQ – Prelatism

But in what cases do you not know exactly the file extension? you create the blob file with the full path url, so should know the file extension. – Prelatism

@Prelatism Oops, you are right. I was missing the part where I could get the extension from the URL itself. Thanks for pointing it out. – Jase