Skip to content

Commit 6ba5227

Browse files
ypf2021ypf2021
committed
feat:解析，阅读源码，添加注释
1 parent bed9b9d commit 6ba5227

10 files changed

+81
-56
lines changed

‎developRecord.md

+6
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,9 @@
9494
- 之前的缺点 尤其体现在 controller.ts 中。页面的结构是由字符串template模板组成的，在里面写入样式和结构，然后插入innerHTMl，再通过querySelector()的方式获取元素实例，进行很多的事件操作。划分结构非常困难，按照这种模式进行分离也不容易，强行分割的话难以拼接，同时会让目录结构很复杂，但功能又是相似，同级的。所以尽心重构，动态的创建DOM元素。
9595
- 新的类继承了事件总线，Component，规范每个功能类，细化分工。
9696

97+
#### 8/30
98+
- 截至到现在，将新版本进行完善，连接通mp4文件和mpd文件的播放，mpd如原先一样，mp4进行了 MP4Box的加工
99+
100+
- 需要的知识点：
101+
- 请求头 Range，响应头 Content-Range
102+
-

‎dist/player.cjs.js

+17-12
Original file line numberDiff line numberDiff line change
@@ -10238,7 +10238,7 @@ class DownLoader {
1023810238
resume() {
1023910239
mp4box_all_1.info("Downloader", "Resuming file download");
1024010240
this.isActive = true;
10241-
if (this.chunkSize = 0) {
10241+
if (this.chunkSize == 0) {
1024210242
this.chunkSize = Infinity;
1024310243
}
1024410244
this.getFile();
@@ -10362,7 +10362,10 @@ class MediaPlayer {
1036210362
this.mp4boxfile.onMoovStart = function () {
1036310363
mp4box_all_1.info("Application", "Starting to parse movie information");
1036410364
};
10365+
// debugger阅读源码可知，当在(第一次得到总数)第二次请求内容被请求到(请求最后一段)，并被通过 mp4boxfile.appendBuffer 添加之后，就会触发 MP4Boxfile的 onready事件，拿到的info就是进过内部处理后的数据MoovBoxInfo
1036510366
this.mp4boxfile.onReady = function (info) {
10367+
debugger;
10368+
console.log("onready");
1036610369
mp4box_all_1.info("Application", "Movie information received");
1036710370
ctx.mediaInfo = info;
1036810371
// 计算总时间
@@ -10374,16 +10377,22 @@ class MediaPlayer {
1037410377
else {
1037510378
ctx.mediaSource.duration = info.duration / info.timescale;
1037610379
}
10380+
// 在这里去停掉 请求的定时器，结束请求，之后开始处理资源
1037710381
ctx.stop();
1037810382
ctx.initializeAllSourceBuffers();
1037910383
};
10384+
// appendBuffer之后，执行完onready -> processSamples(last) 时被触发 -> onSegment is_last参数就是appendBuffer时传入的end
1038010385
this.mp4boxfile.onSegment = function (id, user, buffer, sampleNum, is_last) {
10386+
// debugger
10387+
console.log("onsegment");
1038110388
//sb = sourcebuffer
1038210389
var sb = user;
1038310390
// saveBuffer(buffer, 'track-'+id+'-segment-'+sb.segmentIndex+'.m4s');
1038410391
sb.segmentIndex++;
10392+
// pendingAppends是数组，在onready时创建完毕，存放的是参数信息
1038510393
sb.pendingAppends.
1038610394
push({ id: id, buffer: buffer, sampleNum: sampleNum, is_last: is_last });
10395+
// 添加完后调用 updateEnd
1038710396
ctx.onUpdateEnd.call(sb, true, false, ctx);
1038810397
};
1038910398
this.mp4boxfile.onItem = function (item) {
@@ -10435,6 +10444,7 @@ class MediaPlayer {
1043510444
let sb;
1043610445
if (MediaSource.isTypeSupported(mime)) {
1043710446
try {
10447+
// 注册回调函数参数，给sb添加属性
1043810448
console.log("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1043910449
mp4box_all_1.info("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1044010450
// 根据moov box中解析出来的track去一一创建对应的sourcebuffer
@@ -10459,15 +10469,6 @@ class MediaPlayer {
1045910469
throw new Error(`你的浏览器不支持${mime}媒体类型`);
1046010470
}
1046110471
}
10462-
// addSourceBufferListener(info: MoovBoxInfo) {
10463-
// // "track" 属性表示一个轨道（track）。一个 MP4 文件可以包含多个轨道，例如音频轨道、视频轨道等。
10464-
// // 通过访问 "MoovBoxInfo" 对象的 "track" 属性，您可以获取轨道的详细信息，如轨道类型、编解码器信息、时长、帧率等。
10465-
// for (var i = 0; i < info.tracks.length; i++) {
10466-
// var track = info.tracks[i];
10467-
// // 将获取到的track信息，通过addbuffer 纯递给MediaSource
10468-
// this.addBuffer(track);
10469-
// }
10470-
// }
1047110472
// 开始加载视频
1047210473
loadFile() {
1047310474
let ctx = this;
@@ -10503,16 +10504,18 @@ class MediaPlayer {
1050310504
}
1050410505
initializeAllSourceBuffers() {
1050510506
if (this.mediaInfo) {
10506-
var info = this.mediaInfo;
10507+
// 拿到资源track，挨个调用 this.addBuffer
10508+
let info = this.mediaInfo;
1050710509
for (var i = 0; i < info.tracks.length; i++) {
1050810510
var track = info.tracks[i];
1050910511
this.addBuffer(track);
1051010512
}
10513+
// addbuffer执行完成后
1051110514
this.initializeSourceBuffers();
1051210515
}
1051310516
}
1051410517
initializeSourceBuffers() {
10515-
var initSegs = this.mp4boxfile.initializeSegmentation();
10518+
var initSegs = this.mp4boxfile.initializeSegmentation(); // initializeSegmentation内部 resetTables
1051610519
for (var i = 0; i < initSegs.length; i++) {
1051710520
var sb = initSegs[i].user;
1051810521
if (i === 0) {
@@ -10527,6 +10530,7 @@ class MediaPlayer {
1052710530
}
1052810531
}
1052910532
onInitAppended(e) {
10533+
// debugger
1053010534
console.log(this);
1053110535
let ctx = this;
1053210536
var sb = e.target;
@@ -10548,6 +10552,7 @@ class MediaPlayer {
1054810552
ctx.mp4boxfile.releaseUsedSamples(this.id, this.sampleNum);
1054910553
delete this.sampleNum;
1055010554
}
10555+
// 如果 sb 的 is_last 属性为true，就可以结束了，但是现在这部分有bug
1055110556
if (this.is_last) {
1055210557
this.ms.endOfStream();
1055310558
}

‎dist/player.es.js

+17-12
Original file line numberDiff line numberDiff line change
@@ -10234,7 +10234,7 @@ class DownLoader {
1023410234
resume() {
1023510235
mp4box_all_1.info("Downloader", "Resuming file download");
1023610236
this.isActive = true;
10237-
if (this.chunkSize = 0) {
10237+
if (this.chunkSize == 0) {
1023810238
this.chunkSize = Infinity;
1023910239
}
1024010240
this.getFile();
@@ -10358,7 +10358,10 @@ class MediaPlayer {
1035810358
this.mp4boxfile.onMoovStart = function () {
1035910359
mp4box_all_1.info("Application", "Starting to parse movie information");
1036010360
};
10361+
// debugger阅读源码可知，当在(第一次得到总数)第二次请求内容被请求到(请求最后一段)，并被通过 mp4boxfile.appendBuffer 添加之后，就会触发 MP4Boxfile的 onready事件，拿到的info就是进过内部处理后的数据MoovBoxInfo
1036110362
this.mp4boxfile.onReady = function (info) {
10363+
debugger;
10364+
console.log("onready");
1036210365
mp4box_all_1.info("Application", "Movie information received");
1036310366
ctx.mediaInfo = info;
1036410367
// 计算总时间
@@ -10370,16 +10373,22 @@ class MediaPlayer {
1037010373
else {
1037110374
ctx.mediaSource.duration = info.duration / info.timescale;
1037210375
}
10376+
// 在这里去停掉 请求的定时器，结束请求，之后开始处理资源
1037310377
ctx.stop();
1037410378
ctx.initializeAllSourceBuffers();
1037510379
};
10380+
// appendBuffer之后，执行完onready -> processSamples(last) 时被触发 -> onSegment is_last参数就是appendBuffer时传入的end
1037610381
this.mp4boxfile.onSegment = function (id, user, buffer, sampleNum, is_last) {
10382+
// debugger
10383+
console.log("onsegment");
1037710384
//sb = sourcebuffer
1037810385
var sb = user;
1037910386
// saveBuffer(buffer, 'track-'+id+'-segment-'+sb.segmentIndex+'.m4s');
1038010387
sb.segmentIndex++;
10388+
// pendingAppends是数组，在onready时创建完毕，存放的是参数信息
1038110389
sb.pendingAppends.
1038210390
push({ id: id, buffer: buffer, sampleNum: sampleNum, is_last: is_last });
10391+
// 添加完后调用 updateEnd
1038310392
ctx.onUpdateEnd.call(sb, true, false, ctx);
1038410393
};
1038510394
this.mp4boxfile.onItem = function (item) {
@@ -10431,6 +10440,7 @@ class MediaPlayer {
1043110440
let sb;
1043210441
if (MediaSource.isTypeSupported(mime)) {
1043310442
try {
10443+
// 注册回调函数参数，给sb添加属性
1043410444
console.log("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1043510445
mp4box_all_1.info("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1043610446
// 根据moov box中解析出来的track去一一创建对应的sourcebuffer
@@ -10455,15 +10465,6 @@ class MediaPlayer {
1045510465
throw new Error(`你的浏览器不支持${mime}媒体类型`);
1045610466
}
1045710467
}
10458-
// addSourceBufferListener(info: MoovBoxInfo) {
10459-
// // "track" 属性表示一个轨道（track）。一个 MP4 文件可以包含多个轨道，例如音频轨道、视频轨道等。
10460-
// // 通过访问 "MoovBoxInfo" 对象的 "track" 属性，您可以获取轨道的详细信息，如轨道类型、编解码器信息、时长、帧率等。
10461-
// for (var i = 0; i < info.tracks.length; i++) {
10462-
// var track = info.tracks[i];
10463-
// // 将获取到的track信息，通过addbuffer 纯递给MediaSource
10464-
// this.addBuffer(track);
10465-
// }
10466-
// }
1046710468
// 开始加载视频
1046810469
loadFile() {
1046910470
let ctx = this;
@@ -10499,16 +10500,18 @@ class MediaPlayer {
1049910500
}
1050010501
initializeAllSourceBuffers() {
1050110502
if (this.mediaInfo) {
10502-
var info = this.mediaInfo;
10503+
// 拿到资源track，挨个调用 this.addBuffer
10504+
let info = this.mediaInfo;
1050310505
for (var i = 0; i < info.tracks.length; i++) {
1050410506
var track = info.tracks[i];
1050510507
this.addBuffer(track);
1050610508
}
10509+
// addbuffer执行完成后
1050710510
this.initializeSourceBuffers();
1050810511
}
1050910512
}
1051010513
initializeSourceBuffers() {
10511-
var initSegs = this.mp4boxfile.initializeSegmentation();
10514+
var initSegs = this.mp4boxfile.initializeSegmentation(); // initializeSegmentation内部 resetTables
1051210515
for (var i = 0; i < initSegs.length; i++) {
1051310516
var sb = initSegs[i].user;
1051410517
if (i === 0) {
@@ -10523,6 +10526,7 @@ class MediaPlayer {
1052310526
}
1052410527
}
1052510528
onInitAppended(e) {
10529+
// debugger
1052610530
console.log(this);
1052710531
let ctx = this;
1052810532
var sb = e.target;
@@ -10544,6 +10548,7 @@ class MediaPlayer {
1054410548
ctx.mp4boxfile.releaseUsedSamples(this.id, this.sampleNum);
1054510549
delete this.sampleNum;
1054610550
}
10551+
// 如果 sb 的 is_last 属性为true，就可以结束了，但是现在这部分有bug
1054710552
if (this.is_last) {
1054810553
this.ms.endOfStream();
1054910554
}

‎dist/player.min.cjs.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/player.min.es.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/player.min.umd.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/player.umd.js

+17-12
Original file line numberDiff line numberDiff line change
@@ -10240,7 +10240,7 @@
1024010240
resume() {
1024110241
mp4box_all_1.info("Downloader", "Resuming file download");
1024210242
this.isActive = true;
10243-
if (this.chunkSize = 0) {
10243+
if (this.chunkSize == 0) {
1024410244
this.chunkSize = Infinity;
1024510245
}
1024610246
this.getFile();
@@ -10364,7 +10364,10 @@
1036410364
this.mp4boxfile.onMoovStart = function () {
1036510365
mp4box_all_1.info("Application", "Starting to parse movie information");
1036610366
};
10367+
// debugger阅读源码可知，当在(第一次得到总数)第二次请求内容被请求到(请求最后一段)，并被通过 mp4boxfile.appendBuffer 添加之后，就会触发 MP4Boxfile的 onready事件，拿到的info就是进过内部处理后的数据MoovBoxInfo
1036710368
this.mp4boxfile.onReady = function (info) {
10369+
debugger;
10370+
console.log("onready");
1036810371
mp4box_all_1.info("Application", "Movie information received");
1036910372
ctx.mediaInfo = info;
1037010373
// 计算总时间
@@ -10376,16 +10379,22 @@
1037610379
else {
1037710380
ctx.mediaSource.duration = info.duration / info.timescale;
1037810381
}
10382+
// 在这里去停掉 请求的定时器，结束请求，之后开始处理资源
1037910383
ctx.stop();
1038010384
ctx.initializeAllSourceBuffers();
1038110385
};
10386+
// appendBuffer之后，执行完onready -> processSamples(last) 时被触发 -> onSegment is_last参数就是appendBuffer时传入的end
1038210387
this.mp4boxfile.onSegment = function (id, user, buffer, sampleNum, is_last) {
10388+
// debugger
10389+
console.log("onsegment");
1038310390
//sb = sourcebuffer
1038410391
var sb = user;
1038510392
// saveBuffer(buffer, 'track-'+id+'-segment-'+sb.segmentIndex+'.m4s');
1038610393
sb.segmentIndex++;
10394+
// pendingAppends是数组，在onready时创建完毕，存放的是参数信息
1038710395
sb.pendingAppends.
1038810396
push({ id: id, buffer: buffer, sampleNum: sampleNum, is_last: is_last });
10397+
// 添加完后调用 updateEnd
1038910398
ctx.onUpdateEnd.call(sb, true, false, ctx);
1039010399
};
1039110400
this.mp4boxfile.onItem = function (item) {
@@ -10437,6 +10446,7 @@
1043710446
let sb;
1043810447
if (MediaSource.isTypeSupported(mime)) {
1043910448
try {
10449+
// 注册回调函数参数，给sb添加属性
1044010450
console.log("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1044110451
mp4box_all_1.info("MSE - SourceBuffer #" + track_id, "Creation with type '" + mime + "'");
1044210452
// 根据moov box中解析出来的track去一一创建对应的sourcebuffer
@@ -10461,15 +10471,6 @@
1046110471
throw new Error(`你的浏览器不支持${mime}媒体类型`);
1046210472
}
1046310473
}
10464-
// addSourceBufferListener(info: MoovBoxInfo) {
10465-
// // "track" 属性表示一个轨道（track）。一个 MP4 文件可以包含多个轨道，例如音频轨道、视频轨道等。
10466-
// // 通过访问 "MoovBoxInfo" 对象的 "track" 属性，您可以获取轨道的详细信息，如轨道类型、编解码器信息、时长、帧率等。
10467-
// for (var i = 0; i < info.tracks.length; i++) {
10468-
// var track = info.tracks[i];
10469-
// // 将获取到的track信息，通过addbuffer 纯递给MediaSource
10470-
// this.addBuffer(track);
10471-
// }
10472-
// }
1047310474
// 开始加载视频
1047410475
loadFile() {
1047510476
let ctx = this;
@@ -10505,16 +10506,18 @@
1050510506
}
1050610507
initializeAllSourceBuffers() {
1050710508
if (this.mediaInfo) {
10508-
var info = this.mediaInfo;
10509+
// 拿到资源track，挨个调用 this.addBuffer
10510+
let info = this.mediaInfo;
1050910511
for (var i = 0; i < info.tracks.length; i++) {
1051010512
var track = info.tracks[i];
1051110513
this.addBuffer(track);
1051210514
}
10515+
// addbuffer执行完成后
1051310516
this.initializeSourceBuffers();
1051410517
}
1051510518
}
1051610519
initializeSourceBuffers() {
10517-
var initSegs = this.mp4boxfile.initializeSegmentation();
10520+
var initSegs = this.mp4boxfile.initializeSegmentation(); // initializeSegmentation内部 resetTables
1051810521
for (var i = 0; i < initSegs.length; i++) {
1051910522
var sb = initSegs[i].user;
1052010523
if (i === 0) {
@@ -10529,6 +10532,7 @@
1052910532
}
1053010533
}
1053110534
onInitAppended(e) {
10535+
// debugger
1053210536
console.log(this);
1053310537
let ctx = this;
1053410538
var sb = e.target;
@@ -10550,6 +10554,7 @@
1055010554
ctx.mp4boxfile.releaseUsedSamples(this.id, this.sampleNum);
1055110555
delete this.sampleNum;
1055210556
}
10557+
// 如果 sb 的 is_last 属性为true，就可以结束了，但是现在这部分有bug
1055310558
if (this.is_last) {
1055410559
this.ms.endOfStream();
1055510560
}

0 commit comments

Comments
 (0)