'How to set the download file extension for blob data

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>

Solution 1:^[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);
})();