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>

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>

• javascript
• html
• google-chrome
• video
• blob

• 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. – LF-DevJourney Commented Mar 31, 2022 at 4:07
• Solution in How to set name of file downloaded from browser? also not works here. – LF-DevJourney Commented Mar 31, 2022 at 6:21
• How to modify the internal media controls download event of video tag? – LF-DevJourney Commented Apr 7, 2022 at 10:41
• Solve by specific the blob type when create the blob data. var blob = new Blob([buffer],{'type': 'video/mp4'}) – LF-DevJourney Commented Apr 19, 2022 at 7:18

1 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/en-US/docs/Web/HTML/Element/a#attributes https://developer.mozilla/en-US/docs/Web/HTML/Element/area https://developer.mozilla/en-US/docs/Web/HTML/Element/video https://developer.mozilla/en-US/docs/Web/HTML/Global_attributes