How to create blob of a video file

Question

I would like to create a Blob of a local video file file:///home/user/NodeJS/Projects/project1/routes/../videosTrans/Node.js tutorial for beginners - an introduction to Node.js with Express2.js.mp4

I could not understand the exact format of the Blob. I wish to create it to give it as input to the function createObjectURL(). The following does not work:

 var URL = this.window.URL || this.window.webkitURL;
       var file = new Blob(["file:///home/sanika/NodeJS/Projects/project1/routes/../videosTrans/Node.js tutorial for beginners - an introduction to Node.js with Express2.js.mp4"], "type" : "video\/mp4");
       var value = URL.createObjectURL(file);

Weathersby

Hello, did you find a way to do that ? I'd like to do the same – Spoonerism

@h4mm3R check my answer below. – Acreage

Answer 1

Please use the second parameter of blob as object. so your code should be :

var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(
    ["file:///home/sanika/NodeJS/Projects/project1/routes/../videosTrans/Node.js tutorial for beginners - an introduction to Node.js with Express2.js.mp4"],
    {"type" : "video\/mp4"});
var value = URL.createObjectURL(file);

Guardhouse

Is it possible to convert this blob to webm ? – Portentous

This is not working, Please can you provide jsfiddle? Is anything changed recently in HTML5? Thanks – Coniah

you are creating a blob url for text file://... and mark it as mp4 – Haviland

Answer 2

you can get that by the following piece of code. JSFiddle demo link also given for testing

HTML Code

<form>
    <video></video>
    <br/>
    <input type="file" name="file" id="fileItem" onchange="onChange()" >
    <input type="submit" value="Play">
</form>

JS Code

    var URL = window.URL || window.webkitURL;
    var video = document.getElementsByTagName('video')[0];
    function onChange() {
        var fileItem = document.getElementById('fileItem');
        var files = fileItem.files;
        var file = files[0];
        var urlBlob = URL.createObjectURL(file);
        video.src = urlBlob;
        video.load();
        video.onloadeddata = function() {
            video.play();
        }
    }

Test It here

https://jsfiddle.net/9ad3nm2o/2/

Acreage

@Abhishekkumar which browser are you using.. i just checked on chrome.. its working. – Acreage

Same browser. chrome. . i had asked this question also : #63195004 – Alcmene

I understood what I was trying different. I was trying to play a no sound mp4. But I don't uderstand now. why video with no sound is not working. – Alcmene