2023年6月27日发(作者：)

关于使⽤video标签时src⽹址blob类型的理解想下载⼀个视频时发现是个blob:src形式；不明⽩这个是个什么⿁，以下是搜索学习的总结1.

javascript

var video=elector('video');

var mediaSource=new MdeiaSource;

=ObjectURL(mediaSource);

ntListener('sourceopen',sourceOpen);

function sourceOpen(){

var mediaSource=this;

var sourceBuffer = rceBuffer('video/mp4';codecs="avc1.42E01E,mp4a.40.2");

ntListener('updateend',function(){

tream();

();

})

Buffer(buf);// buf is the arraybuffer to store the video data

}

代码解析：创建变量名为video的DOM对象，创建变量名为mediaSource的MediaSource对象。通过函数createObjectURL将video对象的src和mediaSource进⾏连接，然后通过注册事件event::sourceopen来触发当前连接之后的的回调处理；回调处理就是需要赋值视频数据的地⽅，调⽤MediaSourceBuffer::addSourceBuffer⽅法来构建⼀个存放视频数据的Buffer；在往buffer中存放数据结束后触发事件updateend。然后调⽤play函数通知浏览器播放视频2. MediaSource属性：1. Buffers:只读 ，返回⼀个SourceBufferList对象，包含了SourceBuffer的列表object associatedwith this MediaSource.2. SourceBuffer:只读3. tate:只读4. on⽅法：5. addSourceBuffer():该事件是在触发sourceopen监听时进⾏的，该动作会创建⼀个sourceBuffer对象⽤于数据流的播放处理。如果mediaSource对象⽆法触发该事件；则⽆法通过该扩展进⾏播放的。6. removeSourceBuffer():7. endOfStream()3. MediaSource接⼝的使⽤：1. 判断是否mediaSource的扩展类，该语句决定了整个播放⽅式是否可以使⽤MediaSource接⼝控制播放器。javascript

ource = ource || MediaSource;

2. isTypeSupporteed:判断是否⽀持要解码播放的视频⽂件编码和类型。javascript

Supported('video/webm;codecs="vorbis,vp8"');//是否⽀持webm

Supported('video/mp4;codecs="avc1.42E01E,mp4a.40.2"')//是否⽀持MP4

Supported('video/mp2t;codes="avc1.42E01E,mp4a.40.2"')//是否⽀持ts

3. addSourceBufferjavascript

rceBuffer('video/mp4;codecs="avc1.42E01E,mp4a.40.2"')

4. appendBuffer:sourceBuffer对象的⽅法，⽤于持续数据的添加播放javascript

Buffer(Uint8array);//媒体⼆进制数据 Buffer(Uint8array);//媒体⼆进制数据

5. buffered: 类型为TimeRanges，描述了添加进去的所有媒体数据的range信息。为⼀个数组，⾥边标⽰了持续或间断的时间信息列表javascript

for(var i=0;i<;i++){

start=(i)//第i个range信息的开始时间

end=(i);//第i个range信息的结束时间

}

如果播放的媒体数据是连续的；则只有⼀个开始时间点和⼀个结束时间点。所以如果要计算缓冲中还存在多少时间则可以通过该描述信息与当前播放时间点进⾏换算javascript

function play(){

if(!ource){

ource=new MediaSource();

var me=this;

ntListener("sourceopen",function(){

aSourceOpen();

});

ntListener("sourceended",function(){

aSourceEnded();

});

ntListener('sourceclose',function(){

aSourceClose();

});

ntListener("error",function(){

taError();

});

=NewVideo();

=ObjectURL(ource);

();

}

if(!Buffer){

return ;

}

if(ng){

return;//上⼀块数据还在添加中

}

try{

Buffer(dataBytes);//添加数据

}catch(err){}

}

function createNewVideo(){

var newVideo=Element("video");

="player";

=idth;

=eight;

return newVideo;

}

//事件侦听

onMediaSourceOpen:function(){

//DOMString可以通过转码获得

var typeNmae='video/mp4;codecs="avc1.42E01E,mp4a.40.2"';

var issurpport=Supported(typeName);

on=uration;//设置视频总时长

Buffer=rceBuffer(typeName);

}

onMediaSourceEnded:function(){

("source ended");

}

onMediaSourceClosed:function(){

("cource close");

} }

}

4. 以下是⾃⼰做的⼀个demo；MP4格式的⽂件未成功；webm格式的成功了；“`

“`