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

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:无法读取null {stack:(...)的属性'1',消息:"无法读取null的属性'1'}

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

斑点:HTTP%3A //本地主机%3A9000/5621470e-593A-4255-8924-f48731b97803

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

谢谢,Lior

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