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

Question

我想在本地播放视频(不上传到服务器)。我可以像这样在纯 javascript 和 html5 中做到这一点:

html:

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

javascript 与 jQuery:

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

而且有效。

但使用带有以下代码的 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: Cannot read property '1' of null {stack: (...), message: "Cannot read property '1' of null"}

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

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

有谁知道这个错误的原因以及用video.js在客户端播放本地文件的方法吗？

谢谢，里尔

Answer 1

我发现了我的错误，我必须像这样将文件类型传递给 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();
        });

现在它工作正常......