Video.js - play a blob (local file @ the client) created with createObjectURL

Question

I would like to play a video locally (without uploading it to the server). I can do that in pure javascript and html5 like so:

html:

<video id="video1"></video>
<input type="file" id="fileInput"  multiple />

javascript with jQuery:

var $video = $('#video1');
$video.prop('src', URL.createObjectURL($('#fileInput').get(0).files[0]));
$video.get(0).play();

and it works.

but with video.js with the following code:

var myPlayer = videojs('video1').ready(function () {
            // ready
            var filename = URL.createObjectURL($('#fileInput').get(0).files[0]);
            this.src(filename);
            this.load();  
            this.play();
        });

I get the following error:

VIDEOJS: TypeError: Cannot read property '1' of null {stack: (...), message: "Cannot read property '1' of null"}

I am guessing that this is because the blob does not have a file extension, it looks like this:

blob:http%3A//localhost%3A9000/5621470e-593a-4255-8924-f48731b97803

does anyone know the reason of this error and a way to play a local file on the client with video.js?

Thanks, Lior

Solution 1

I found my error, I had to pass the file type to video.js like so:

var myPlayer = videojs('video1').ready(function () {
            // ready
            var filename = $('#fileInput').get(0).files[0].name;
            var fileUrl = URL.createObjectURL($('#fileInput').get(0).files[0]);
            var fileType = $('#fileInput').get(0).files[0].type;
            console.log(filename);
            this.src({ type: fileType, src: fileUrl });
            this.load();
            this.play();
        });

now it works fine...

Solution 2

To play on blob object, you can pass blob as follow:

$video.src({type:'video/mp4', src: URL.createObjectURL(..blobObject..)});