Video.js-播放使用createObjectURL创建的blob（客户端的本地文件）

我想在本地播放视频（不上传到服务器）。 我可以在纯javascript和html5中这样做：

html:

它是有效的

但是，对于video.js，使用以下代码：

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

我得到以下错误：

VIDEOJS:TypeError:无法读取null的属性“1”{stack:（…），消息：“无法读取null的属性“1”}

我猜这是因为blob没有文件扩展名，它看起来是这样的：

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

是否有人知道此错误的原因以及使用video.js在客户端上播放本地文件的方法

谢谢， Lior

我发现了我的错误， 我必须将文件类型传递到video.js，如下所示：

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();
        });

---

现在它工作正常了…

要在blob对象上播放，您可以按如下方式传递blob：

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

---

该错误的实际原因是，必须具有文件的实际内容才能创建blob url。您只有文件名。要使此方法起作用，您需要先异步加载数据，然后再创建它。你不能只凭承诺一步完成所有的事情

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();
        });

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