3

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>
LF00
  • 27,015
  • 29
  • 156
  • 295
  • Use the `download` for data uri works as the question [Is there any way to specify a suggested filename when using data: URI?](https://stackoverflow.com/q/283956/6521116) shows. But not works here for the blob uri. – LF00 Mar 31 '22 at 04:07
  • Solution in [How to set name of file downloaded from browser?](https://stackoverflow.com/q/3102226/6521116) also not works here. – LF00 Mar 31 '22 at 06:21
  • [How to modify the internal media controls download event of video tag?](https://stackoverflow.com/q/71700860/6521116) – LF00 Apr 07 '22 at 10:41
  • Solve by specific the blob type when create the blob data. `var blob = new Blob([buffer],{'type': 'video/mp4'})` – LF00 Apr 19 '22 at 07:18

1 Answers1

2

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

enter image description here enter image description here

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

xgqfrms
  • 10,077
  • 1
  • 69
  • 68
  • This is an image blob. Video is not like this, video download is from the video player. – LF00 Apr 19 '22 at 01:05
  • 1
    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. – xgqfrms Apr 19 '22 at 03:32
  • 1
    try this lib `https://videojs.com/` – xgqfrms Apr 19 '22 at 03:42
  • What if we don't know the file extension exactly. Is it possible to specify file extension based on the received blob? – Ali Baghban Jul 12 '22 at 06:47
  • @AliBaghban Of course! for more details see this demo https://codepen.io/xgqfrms/full/ExEgKjQ – xgqfrms Jul 12 '22 at 13:00
  • 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. – xgqfrms Jul 12 '22 at 13:03
  • @xgqfrms Oops, you are right. I was missing the part where I could get the extension from the URL itself. Thanks for pointing it out. – Ali Baghban Jul 12 '22 at 18:15