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('.mp4');
</script>
But I'm getting:
Failed to execute
'createObjectURL' on 'URL': No function was found that matched the signature provided.
Jsfiddle: /
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/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/xyzr67Lu/
Share Improve this question edited Jul 17, 2019 at 4:59 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Jan 2, 2019 at 9:57 AztrizeAztrize 51 gold badge1 silver badge4 bronze badges 10- 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 Commented Jan 2, 2019 at 10:05
- I read in a blog that using blob url to hide the original link is more secure – Aztrize Commented Jan 2, 2019 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 Commented Jan 2, 2019 at 10:11
- If you really need a Blob for whatever reason, you have to download the data as you can see in stackoverflow./a/52410044/910411 – Tobi Commented Jan 2, 2019 at 10:13
-
@Tobi
let blob = await fetch(url).then(r => r.blob());to put it as video.src, justvideo.src = blob? – Aztrize Commented Jan 2, 2019 at 10:16
1 Answer
Reset to default 1You 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/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/v/oceans.mp4');
</script>