Question

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

HTML：

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

使用jQuery javascript：

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：无法读取属性＆＃39; 1＆＃39; null {stack：（...），message：＆＃34;无法读取属性＆＃39; 1＆＃39; of null＆＃34;}

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

团块：HTTP％3A //本地主机％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();
        });

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

Answer 2

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

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

Answer 3

该错误的实际原因是，您必须具有文件的实际内容才能创建Blob URL。您只有文件名。为了使这种方法起作用，您需要先异步加载数据，然后再创建它。仅凭承诺，您不可能一步一步完成所有工作。

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

3 个答案: