How to download mp4 video using JavaScript from the <video src="blob:https//domain...> tag. Is it even possible or it blocked within web browsers? I've tried every method I found on StackOverflow, nothing works.

Sample HTML code from Gettr:

<video preload="auto" controlslist="nodownload" playsinline="" webkit-playsinline="" x5-playsinline="" style="width: 100%; height: 100%;" src="blob:;></video>

How to download this using JavaScript?

How to download mp4 video using JavaScript from the <video src="blob:https//domain...> tag. Is it even possible or it blocked within web browsers? I've tried every method I found on StackOverflow, nothing works.

Sample HTML code from Gettr:

<video preload="auto" controlslist="nodownload" playsinline="" webkit-playsinline="" x5-playsinline="" style="width: 100%; height: 100%;" src="blob:https://gettr./75e599c0-6616-4131-9d46-40c5b43d03c0"></video>

How to download this using JavaScript?

• javascript
• html
• video
• download
• blob

Share Improve this question Follow asked Sep 23, 2022 at 19:02 Marco ManelliMarco Manelli 9011 gold badge11 silver badge55 bronze badges 1

• I think you can only download if the blob is ing from your own server address. You cannot download external file data. If this was my problem I would see if it's possible to read the blob as a (bytes) Array. You could try using fileReader for that, but it won't like data ing from external domains, so then you'll need to proxy the file/blob access through PHP... – VC.One Commented Sep 23, 2022 at 22:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

If the video url es from a Blob created by URL.createObjectURL(blob) then it's posible to get the video by doing something like

function downloadURL(url, name = null) {
  const a = document.createElement('a')
  a.href = url
  a.download = name ?? ''
  a.click()
}

const video = document.querySelector(<insert-selector-here>)
const blobURL = video.currentSrc

downloadURL(blobURL, 'video.mp4')

But if that url es from the MediaSource API then you won't be able to download it that easily since it is probably a video streaming. Depending the way it works it could be really easy or really hard to get the video.

https://developer.mozilla/en-US/docs/Web/API/MediaSource

Try adding a download link like this. It will work if it's actually a blob mp4 file link:

<a href="blob:https://gettr./75e599c0-6616-4131-9d46-40c5b43d03c0" download>Download</a>