Understanding of the SRC URL blob type when using the video tag

Want to download a video when found to be a blob:src form; I don't know what the hell this is. The following is a summary of search learning

Reference URL: https://creamidea.github.io/static/html/articles/HTML5-Video-Blob.html. First, the code is familiar with the meaning.

Javascript
var video=document.queryselector (' video ');
var mediasource=new mdeiasource;
Video. Src=url.createobjecturl (MediaSource);
Mediasource.addeventlistener (' Sourceopen ', sourceopen);
function Sourceopen () {
var mediasource=this;
var sourcebuffer = mediasource.addsourcebuffer (' Video/mp4 '; codecs= "avc1.42e01e,mp4a.40.2");
Sourcebuffer.addeventlistener (' Updateend ', function () {
Mediasource.endofstream ();
Video.play ();
})
Sourcebuffer.appendbuffer (BUF);//BUF is the Arraybuffer to store the video data
}

Code parsing: Create a DOM object with a variable named video and create a MediaSource object with the variable named MediaSource. The video object's SRC and MediaSource are connected by the function Createobjecturl, and then the callback processing after the current connection is triggered by registering the event Event::sourceopen, which is the place where the data is to be assigned. Call the Mediasourcebuffer::addsourcebuffer method to construct a buffer that holds the video data and to trigger event Updateend after the data is stored in buffer. Then call the Play function to notify the browser to play the video

Mediasource:mediasource is the interface of the media source Extensions API that represents the Htmlmediaelement object of the medium resource. The MediaSource object can be attached to the htmlmediaelement on the client for playback.
Reference URL: Https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource

MediaSource property: mediasource.sourcebuffers: read-only , returns a Sourcebufferlist object that contains a list of Sourcebuffer objects associated With this MediaSource. Mediasource.activesourcebuffer: read-only mediasource.readystate: Read-only

Mediasource.duration

Method:

Addsourcebuffer (): This event occurs when a Sourceopen listener is triggered, and the action creates a Sourcebuffer object for the data flow playback processing. If the MediaSource object cannot trigger the event, it cannot be played through the extension. Removesourcebuffer (): Endofstream ()

Use of the MediaSource interface:

Reference URL: http://chenzhaofei.lofter.com/post/1d03c1b7_58d8a79

The extension class that determines whether the mediasource can be used to control the player using the MediaSource interface.

Javascript
Window. MediaSource = window. MediaSource | | Window. Webkitmediasource;

Istypesupporteed: Determines whether the video file encoding and type to decode playback are supported.

Javascript
mediasource.istypesupported (' video/webm;codecs= ' vorbis,vp8 ');//Support WEBM
mediasource.istypesupported (' video/mp4;codecs= ' avc1.42e01e,mp4a.40.2 ')//Support MP4
mediasource.istypesupported (' video/mp2t;codes= ' avc1.42e01e,mp4a.40.2 ')//whether TS is supported

Addsourcebuffer

Javascript
Mediasource.addsourcebuffer (' video/mp4;codecs= ' avc1.42e01e,mp4a.40.2 "')

Methods for Appendbuffer:sourcebuffer objects, for adding playback of continuous data

Javascript
Sourcebuffer.appendbuffer (Uint8array);//Media binary data

Buffered: Type Timeranges, which describes the range information for all media data added. As an array that indicates a list of continuous or intermittent time information

Javascript
for (Var i=0;i<buffered.length;i++) {
Start=buffered.start (i)//start time of the I range information
End=buffered.end (i);//end time of the I range information
}

If the media data being played is contiguous, then there is only one start point and one end point in time. So if you want to calculate how much time is still in the buffer, it can be converted to the current playback point by this descriptive information.

Javascript
function Play () {
if (!this.mediasource) {
This.mediasource=new MediaSource ();
var me=this;
This.mediaSource.addEventListener ("Sourceopen", function () {
Me.onmediasourceopen ();
});
This.mediaSource.addEventListener ("sourceended", function () {
Me.onmediasourceended ();
});
This.mediaSource.addEventListener (' Sourceclose ', function () {
Me.onmediasourceclose ();
});
This.mediaSource.addEventListener ("Error", function () {
Me.onupdataerror ();
});
This.video=this.createnewvideo ();
This.video.src=window. Url.createobjecturl (This.mediasource);
This.video.play ();
}
if (!this.sourcebuffer) {
return;
}
if (this.sourceBuffer.updating) {
return;//a piece of data is still being added.
}
try{
This.sourceBuffer.appendBuffer (databytes);//Add Data
}catch (err) {}
}
function Createnewvideo () {
var newvideo=document.createelement ("video");
newvideo.id= "Player";
Newvideo.width=this.videowidth;
Newvideo.height=this.videoheight;
return newvideo;
}
Event Listening
Onmediasourceopen:function () {
Domstring can be obtained by transcoding
var typenmae= ' video/mp4;codecs= "avc1.42e01e,mp4a.40.2";
var issurpport=mediasource.istypesupported (typeName);
this.mediasource.duration=this.totalduration;//Set Total video duration
This.sourcebuffer=this.mediasource.addsourcebuffer (TypeName);
}
Onmediasourceended:function () {
Console.log ("source ended");
}
Onmediasourceclosed:function () {
Console.log ("Cource close");
}
}

The following is a demo;mp4 format file that you did not succeed; the WEBM format was successful;

"'

 
 
 "'