Video.js-播放使用createObjectURL创建的Blob(本地文件@客户端) [英] Video.js - play a blob (local file @ the client) created with createObjectURL
问题描述
我想在本地播放视频(不将其上传到服务器). 我可以像这样在纯JavaScript和html5中做到这一点:
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 />
使用jQuery的javascript:
javascript with jQuery:
var $video = $('#video1');
$video.prop('src', URL.createObjectURL($('#fileInput').get(0).files[0]));
$video.get(0).play();
它有效.
但使用带有以下代码的video.js:
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();
});
我收到以下错误:
VIDEOJS:TypeError:无法读取null的属性'1'{stack:(...),消息:无法读取null的属性'1'"}
VIDEOJS: TypeError: Cannot read property '1' of null {stack: (...), message: "Cannot read property '1' of null"}
我猜这是因为blob没有文件扩展名,它看起来像这样:
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
blob:http%3A//localhost%3A9000/5621470e-593a-4255-8924-f48731b97803
有人知道此错误的原因以及使用video.js在客户端上播放本地文件的方法吗?
does anyone know the reason of this error and a way to play a local file on the client with video.js?
谢谢, 骗子
推荐答案
我发现了我的错误, 我必须像这样将文件类型传递给video.js:
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();
});
现在工作正常...
这篇关于Video.js-播放使用createObjectURL创建的Blob(本地文件@客户端)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!