window.URL.createObjectURL(Object obj);是用来将javascript对象转化为url然后在页面上调用的一个方法其典型的使用方法有:var fileObj=document.getElementById('file'); // fileObj.files[0]代表文件选择框选择的第一个文件&nbs

window.URL.createObjectURL(Object obj);是用来将javascript对象转化为url然后在页面上调用的一个方法

其典型的使用方法有:

var fileObj=document.getElementById("file");  
// fileObj.files[0]代表文件选择框选择的第一个文件  
var src = window.URL.createObjectURL(fileObj.files[0]);  
var img = document.createElement('img');  
img.src = src;  
document.body.appendChild(img);

这段代码可以将选中的本地图片通过设置<img>标签的src属性,显示在当前页面上。

而且对于支持<video>标签的html5,可以读取本地的视频文件,然后生成对应的ur并l设置为<video>的src属性的值,这样就可以将视频在该video标签内播放。

当然,我们也可以在服务器端下载视频对应的Blob二进制数据块,然后创建url设置为<video>的src属性的值,可以在该标签内播放。

同时,这个方法也可以为WebRTC的视频功能服务,在Client端Capture的视频流MediaStream一样可以使用window.URL.createObjectURL创建url然后设置为video的src实现视频流的播放。

但是,我在使用mediaSource对象创建url时,出现错误,没有办法创建对应的对象并传给video标签的src

错误的详细信息是:

Not allowed to load local resource: blob:null/db1d4db7-8dc5-483b-ba3c-03ec1616427a

对应的语句是:

var oSourceBuffer, oMediaSource = new MediaSource();  
var url = window.URL.createObjectURL(oMediaSource);  
video.src = url;

但是仔细检查并没有发现什么问题


可是另一个服务器中部署的项目中有类似的使用方式的没有问题的

然后突然醒悟,应为这是一个demo页面,所以是直接在本地用浏览器打开的,而不是部署在服务器上然后进行访问的

然后打开服务器,部署在项目根文件夹,一访问,错误消失

所以, 这个问题在此处很明显便是因为没有部署在服务器中,所以没有办法根据该页面的访问域名确定一个相对url,也就是说在blob后面本该是网址的地方是"null"

当然这个错误也可能有其他原因造成,但是当没有使用错误的情况下,应当就是这个问题。


上一篇:借助MediaSource和SourceBuffer来实现webm格式视频的分片传输

下一篇:jQuery 追加元素的方法,如append、prepend、before

评论列表
发表评论
称呼
邮箱
网址
验证码(*)
热评文章
相关阅读