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

问题:

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

回答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...

回答2:

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

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

回答3:

The actual reason for the error is that you must have the actual contents of the file to create a blob url. You only have the file name. For this method to work you’d need to load the data asynchronously first and then create it. You can’t do it all in one step with just the promise.

文章来源: Video.js - play a blob (local file @ the client) created with createObjectURL