Change Video source to blob / ObjectURL

Question

I would like to hide a video source's attribute. Therefore I wanted to convert the src attribute of the video's source-tag into an objectURL. It sadly doesn't work.

I already tried

function display(vid){
    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);
}

display('video.mp4');

(as provided here: Display a video from a Blob Javascript)

That did not work and the Stack is already 5 years old.

HTML Looks like this

<video id="video">
   <source type="video/mp4" src="video.mp4">
</video>

You have to pass a blob to the display function in that example, not just a string. — Herohtar
– Herohtar, Commented Dec 27, 2018 at 21:06
You can convert a URL to a blob asynchronously using the fetch API response.toBlob() method. — Patrick Roberts
– Patrick Roberts, Commented Dec 27, 2018 at 21:13
have a look at this answer which loads the video into a blob and then to the page - stackoverflow.com/questions/18251632/… - but note that if you're loading the video at all, there will be a network call that references your original source that people can find no matter how much you obfuscate the javascript... — Offbeatmammal
– Offbeatmammal, Commented Dec 27, 2018 at 22:11

jmsn · Accepted Answer · 2020-06-28 16:01:08Z

8

Change the src attribute at the video element directly to the new blob URL.

An example that worked for me:

HTML:

<video width="320" height="240" controls></video>

JS:

function changeVideoSource(blob, videoElement) {
  var blobUrl = URL.createObjectURL(blob);
  console.log(`Changing video source to blob URL "${blobUrl}"`)
  videoElement.src = blobUrl;
  videoElement.play();
}

function fetchVideo(url) {
  return fetch(url).then(function(response) {        
    return response.blob();
  });
}

fetchVideo('https://wherever.com/video.mp4').then(function(blob) {
  changeVideoSource(blob, video);
});

edited Jun 28, 2020 at 16:01

answered Dec 30, 2018 at 15:47

jmsn

1,0901 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Over a year ago

Works perfectly.

Mike · Accepted Answer · 2018-12-28 01:10:53Z

1

Current code looks like this

function blobClip(obj){
   var video = obj;
   var sources = video.getElementsByTagName('source');
   var newReq = new Request(sources[0].src);
   fetch(newReq)
   .then(function(response) {        
        return response.blob();
   })
   .then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        sources[0].src = objectURL;
   });
}

That did not really work. I also tried adding video.load() after the source[0].src got its new objectURL.

Im pretty sure the function call maybe wrong: I added onloadeddata="blobClip(this);" to the video tag. I also tried onload with no success.

answered Dec 28, 2018 at 1:10

Mike

5525 silver badges15 bronze badges

1 Comment

Mike Over a year ago

onloadeddata="blobClip(this);" creates the death loop because Im giving it the command to load after the URL has been created and this triggers the event again... What is the correct event?

Collectives™ on Stack Overflow

Change Video source to blob / ObjectURL

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related