JavaScript写个.ts视频文件Url生成器，使用了string.padStart

0 缘起

想从网上下载一个电视连续剧到平板电脑，在有空时看。

用浏览器的开发者工具监测发现视频是由一序列.ts文件组成的。

ts文件，ts即"Transport Stream"的缩写，特点就是要求从视频流的任一片段开始都是可以独立解码的，非常适合网络视频播放，但不方便下载;-(

1 分析

在网上查了一下这类视频的下载方法，关键是找到相应的.m3u8文件（通常是index.m3u8）：

在这个.m3u8文件中包括这个视频对应的所有.ts文件列表。

把这些.ts文件下载回来，再用ffmpeg这个工具把这些.ts文件合并起来。

2 思路

网上有用Python来实现的方法和代码。

不过由于.m3u8文件中通常也包括了插入的广告的.ts文件，所以还要进一步区分处理。

思路1是用javascript直接生成需要下载的.ts文件列表

思路2是用javascript从.m3u8文件提取.ts文件列表，然后进行区分

接着用专业下载软件来下载.ts文件。

再用ffmpeg这个工具把这些.ts文件合并起来。

这里我们先用思路1来实现。

3 实现

3.1 编写界面

用html来实现。

视频.ts文件url通常是

http://www.abc.com/video/def0000.ts

http://www.abc.com/video/def0001.ts

http://www.abc.com/video/def0002.ts

……

http://www.abc.com/video/def1000.ts

所以我们的界面包括以下组件：

1.Url文本框：存放要下载的ts文件的url通用部分，比如http://www.abc.com/video/。

2.文件名前缀文本框：ts文件名中固定的文字，比如def。

3.起 始 数 字文本框：ts.文件名数字部分的起始值，通常是第1个.ts文件中数字部分，比如0000。

4.结 束 数 字文本框：ts.文件名数字部分的结束值，通常是最后1个.ts文件中数字部分，比如1000。

5.文件列表：保存生成的.ts文件url列表

6.生成文件列表按钮。点击后根据组件1-4的值来生成.ts文件url列表，保存到5。

生成ts文件Url列表        生成文件列表        

参数设置： Url： 文件名前缀： 起 始 数 字： 结 束 数 字：

文件列表：

调试信息：

3.2 生成文件列表的代码

3.2.1 数值验证

起始数字、结束数字 都是数字，我们可以用正则表达式来验证。

//判断是否为自然数（非负整数）//n:numbderfunction isNaturalNumber(n){var reg=/^[0-9]+?$/;return reg.test(n);}// isNaturalNumber(n)

3.2.2 字符填充

比如第1个ts文件名是0000.ts，我们的起始数字是0，那么要生成为0000才行。

要实现这个功能，我们可以自己编程实现，网上也可以找到相应的实现代码。

现在我们也可以使用字符串对象的padStart方法来实现。

padStart方法的语法是：

str.padStart(targetLength [, padString])

padStart()方法的功能是用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。

其中的长度我们可以根据要下载的最后一个ts文件来确定。

例如：

document.write('0'.padStart(4, "0"));     // 输出：0000document.write('0'.padStart(4, 0));     //输出：0000

3.2.3 for循环

我们将用for循环来生成ts文件url列表。

由于起始数字和结束数字都是从文本框获取的，默认是字符串类型。

所以我们在用起始数字和结束数字实现for循环时，要注意类型转换。可以用Number()来实现字符串类型到数字类型的转换。

4.完整代码

>生成ts文件Url列表        生成文件列表        

参数设置： Url： 文件名前缀： 起 始 数 字： 结 束 数 字：

文件列表：

调试信息：var txtUrl = document.getElementById("txtUrl");var txtFnPre = document.getElementById("txtFnPre");var txtFnStartN = document.getElementById("txtFnStartN");var txtFnEndN = document.getElementById("txtFnEndN");var taFileList = document.getElementById("taFileList");var pDbg = document.getElementById("pDbg");//判断是否为自然数（非负整数）//n:numbderfunction isNaturalNumber(n){var reg=/^[0-9]+?$/;return reg.test(n);}// isNaturalNumber(n) //判断是否为正整数//n:numbderfunction isPositiveInteger(n){var reg=/^[1-9]\d*$/;return reg.test(n);}// isNaturalNumber(n)function genFileList(){var sUrl = txtUrl.value;var sF1 = txtFnPre.value;var sF2 = txtFnStartN.value;var sF3 = txtFnEndN.value;if (! isNaturalNumber(sF2)){alert('起始数字不是数字');return} var iF2 = Number(sF2);var sF3 = txtFnEndN.value; if (! isNaturalNumber(sF3)){alert('结束数字不是数字');return;}var iF3 = Number(sF3);if (iF3 0 ? sUrl : '空') + " sF1= " + (sF1.length > 0 ? sF1 : '空') + " sF2=" + (sF2.length > 0 ? sF2 : '空') + typeof(sF2) + " sF3=" + sF3 + typeof(sF2) + "
verify ok."var f = '', f1='';var iFileNameLen = sF3.length;//alert(iFileNameLen);//for (var i = Number(sF2); i i=" + i + typeof(i++) + "： " ;}} // genFileList()