Converting .mp4 link to BLOB in JavaScript

Question

Currently I'm trying convert a external .mp4 file (URL) to blob object using Javascript. Here is my script:

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>
function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function display(videoStream){
    var video = document.querySelector('_video');
    var videoUrl=createObjectURL(videoStream);
    video.src = videoUrl;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

But I'm getting:

Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Jsfiddle: http://jsfiddle.net/xyzr67Lu/

Why do you want to create a Blob out of it? You could set the url directly as source for your video: video.src = videoStream; — Tobi, Jan 02 '19 at 10:05
I read in a blog that using blob url to hide the original link is more secure — Aztrize, Jan 02 '19 at 10:06
I don't really understand what you mean. If you have a url which provides the resource, then you can use it directly in the video tag. — Tobi, Jan 02 '19 at 10:11
If you really need a Blob for whatever reason, you have to download the data as you can see in https://stackoverflow.com/a/52410044/910411 — Tobi, Jan 02 '19 at 10:13
@Tobi `let blob = await fetch(url).then(r => r.blob());` to put it as video.src, just `video.src = blob`? — Aztrize, Jan 02 '19 at 10:16
No, that way you get a Blob object and can use the window.URL.createObjectUrl(blob) function. Nevertheless, I don't see any advantage over using the url directly...I'll post an answer showing how it can be done — Tobi, Jan 02 '19 at 10:21
Btw, if your question has been answered to your satisfaction, please mark the answer as accepted... — Tobi, Jan 02 '19 at 13:28
Just one question, using blob will impact in performance or something like this? — Aztrize, Jan 02 '19 at 17:27
To my understanding, the Blob version will download the complete video first and only afterwards start playing it. With the other solution, you will leave the whole task of buffering and preloading the video to the browser, so the user experience will be a lot better. Note, that I did not verify this and that I might be wrong, but you can easily check it by using a link to a big video file and see how much delay you get with the blob version compared to the video tag alone. — Tobi, Jan 02 '19 at 22:31

score 1 · Accepted Answer · answered Jan 02 '19 at 10:22

You do not need to create a Blob object, you can use the url directly:

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>

function display(videoStream){
    var video = document.getElementById('_video');
    video.src = videoStream;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

If you really want to create a Blob, then you can achieve this by downloading the video first, although the user experience will suffer from this:

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>
function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

async function display(videoStream){
    var video = document.getElementById('_video');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl=createObjectURL(blob);
    video.src = videoUrl;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

Converting .mp4 link to BLOB in JavaScript

1 Answers1

Linked