如何从 HTML blob：URL 下载 mp4 视频？

Question

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.com/75e599c0-6616-4131-9d46-40c5b43d03c0"></video>

How to download this using JavaScript?

Answer 1

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

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

Answer 2

If the video url comes 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(blorURL, 'video.mp4')

But if that url comes 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.org/en-US/docs/Web/API/MediaSource