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

news/2024/7/25 3:40:20/文章来源:https://blog.csdn.net/Purpleendurer/article/details/139104654

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。

<!DOCTYPE html>
<html>
<head><meta name="Author" content="PurpleEndurer"><title>生成ts文件Url列表</title>
</head>
<body>
<body><fieldset><!-- 表单字段集 --><legend>生成文件列表</legend><table><tr><td><p>参数设置:</p><p>              Url:<input type="text" id="txtUrl" ><p>文件名前缀:<input type="text" id="txtFnPre" ><p>起 始 数 字:<input type="text" id="txtFnStartN" value="0"></p><p>结 束 数 字:<input type="text" id="txtFnEndN" value="1000"></P><p></td><td><p>文件列表:</p><textarea name="" rows="12" cols="80" id="taFileList"></textarea></td></tr></table><p><input type="button" value="生成文件列表" onclick="genFileList()"></p></fieldset><div id="divDbg" style="width:100%; height: 400px; border:green 1px solid; color:green; overflow:auto;">调试信息:</div>
</body>
</html>                  

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"));     // 输出:0000
document.write('0'.padStart(4, 0));     //输出:0000

3.2.3 for循环

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

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

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

4.完整代码

<!DOCTYPE html>
<html>
<head><meta name="Author" content="PurpleEndurer"><title>>生成ts文件Url列表</title>
</head>
<body>
<body><fieldset><!-- 表单字段集 --><legend>生成文件列表</legend><table><tr><td><p>参数设置:</p><p>              Url:<input type="text" id="txtUrl" ><p>文件名前缀:<input type="text" id="txtFnPre" ><p>起 始 数 字:<input type="text" id="txtFnStartN" value="0"></p><p>结 束 数 字:<input type="text" id="txtFnEndN" value="1000"></P><p></td><td><p>文件列表:</p><textarea name="" rows="12" cols="80" id="taFileList"></textarea></td></tr></table><p><input type="button" value="生成文件列表" onclick="genFileList()"><input type="button" value="提取文件列表" onclick="getFileList()">   </p></fieldset><div id="divDbg" style="width:100%; height: 400px; border:green 1px solid; color:green; overflow:auto;">调试信息:</div><script>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 divDbg =  document.getElementById("divDbg");//判断是否为自然数(非负整数)//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 < iF2){alert('结束数字 小于 起始数字');return;}divDbg.innerHTML += "sUrl=" +  (sUrl.length > 0 ? sUrl : '空') + "  sF1= " + (sF1.length > 0 ? sF1 : '空') + "  sF2=" +  (sF2.length > 0 ? sF2 : '空') + typeof(sF2) + "  sF3=" + sF3 + typeof(sF2)  + "<br> verify ok."var f = '', f1='';var iFileNameLen = sF3.length;//alert(iFileNameLen);//for (var i = Number(sF2); i < Number(sF3); i++)for (var i = iF2; i < iF3; i++){taFileList.value += sUrl + sF1 + i.toString().padStart(iFileNameLen, 0)+ '.ts\n';divDbg.innerHTML += "<br> i=" + i +  typeof(i++) + ":   " ;}} //   genFileList()</script></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1053349.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开发依赖与运行依赖

1. 概念 开发依赖&#xff1a;devDependencies 运行依赖&#xff1a;dependencies 2. 理解 &#xff08;1&#xff09;devDependencies 在线上状态不需要使用的依赖&#xff0c;就是开发依赖。为什么 npm 要把它单独分拆出来呢&#xff1f;最终目的是为了减少 node_modul…

go语言基准测试Benchmark 最佳实践-冒泡排序和快速排序算法基准测试时间复杂度对比

在go语言中Benchmark基准测试( 在后缀为_test.go的文件中&#xff0c;函数原型为 func BenchmarkXxx(b *testing.B) {}的函数 )可以用来帮助我们发现代码的性能和瓶颈&#xff0c; 其最佳实践 应该是我们最常用的 冒泡排序和快速排序的测试了&#xff0c;废话不说&#xff0c;直…

[图解]SysML和EA建模住宅安全系统-07 to be块定义图

1 00:00:01,970 --> 00:00:05,040 入侵者这里有个∞ 2 00:00:05,530 --> 00:00:07,000 说明它下面已经有子图了 3 00:00:07,010 --> 00:00:08,080 我们看看里面子图 4 00:00:10,200 --> 00:00:17,000 这里&#xff0c;我们看位置 5 00:00:19,030 --> 00:00:…

大模型实战-动手实现单agent

文章目录 入口cli_main.py工具tools.pyprompt prompt_cn.pyLLM 推理 model_provider.py致谢 agent 的核心思想&#xff1a;不断调用 LLM&#xff08;多轮对话&#xff09;&#xff0c;让 LLM 按照指定的格式&#xff08;例如 json&#xff09;进行回复&#xff0c;提取 LLM 回复…

floodfill 算法(上)

目录 图像渲染 题意&#xff1a; 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿数量 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿的最大面积 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 被围绕的区域 题解&#xff1a…

瓦罗兰特账号怎么注册 瓦罗兰特延迟高用什么加速器

《瓦罗兰特》&#xff08;Valorant&#xff09;是由拳头游戏&#xff08;Riot Games&#xff09;开发并发行的一款免费的多人在线第一人称射击游戏&#xff08;FPS&#xff09;&#xff0c;它结合了传统的硬核射击机制与英雄角色的能力系统&#xff0c;为玩家提供了独特的竞技体…

IS-IS开销值和协议优先级

原理概述 IS-IS 协议为路由器的每个 IS-IS 接口定义并维护了一个 Level-1开销值和一个 Level-2开销值。开销值可以在接口上或者全局上手动配置&#xff0c;也可以使用 Auto-Cost 自动计算确定。开销值的优先顺序为&#xff1a;接口上手动配置的开销值&#xff0c;全局上手动配置…

交叉熵损失函数计算过程(tensorflow)

交叉熵损失函数通常用于多类分类损失函数计算。计算公式如下&#xff1a; P为真实值&#xff0c;Q为预测值。 使用tensorflow计算 import tensorflow as tf import keras# 创建一个示例数据集 # 假设有3个样本&#xff0c;每个样本有4个特征&#xff0c;共2个类别 # 目标标签…

瓦罗兰特国际服怎么注册账号 瓦罗兰特 无畏契约账号注册教程

瓦罗兰特国际服怎么注册账号 瓦罗兰特 无畏契约账号注册教程 瓦罗兰特作为拳头游戏开发的一款多人竞技第一人称射击游戏&#xff0c;自从2020年发布之后&#xff0c;热度持续升高&#xff0c;游戏采用5V5竞技模式&#xff0c;采用了传统FPS中游戏的类型&#xff0c;玩家们分为…

Node.js笔记(万字总结)

目录 前言 1.node介绍与使用 1.1 Node介绍 1.2 node.js的优势 1.3 node的安装 1.4 检验是否成功安装 1.5 第一个应用 1.5.1 服务器代码 server.js 1.5.2 完整代码 1.5.3 运行 1.5.4 测试 2.获取参数 3.模块系统 1.模块介绍 2.xiaoyu.js 3.xiaoyu.js完整代码 4…

机器人非线性控制方法——线性化与解耦

机器人非线性控制方法是针对具有非线性特性的机器人系统所设计的一系列控制策略。其中&#xff0c;精确线性化控制和反演控制是两种重要的方法。 1. 非线性反馈控制 该控制律采用非线性反馈控制的方法&#xff0c;将控制输入 u 分解为两个部分&#xff1a; α(x): 这是一个与…

骨折检测数据集VOC+YOLO格式717张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;717 标注数量(xml文件个数)&#xff1a;717 标注数量(txt文件个数)&#xff1a;717 标注类别…

LabVIEW软件需求分析文档内容和编写指南

编写LabVIEW软件需求分析文档&#xff08;Software Requirements Specification, SRS&#xff09;是软件开发的关键步骤之一。以下是详细的内容结构、编写指南和注意事项&#xff1a; 内容结构 引言 项目背景&#xff1a;简要介绍项目背景和目的。 文档目的&#xff1a;说明需…

VPN的详细理解

VPN&#xff08;Virtual Private Network&#xff0c;虚拟私人网络&#xff09;是一种在公共网络上建立加密通道的技术&#xff0c;通过这种技术可以使远程用户访问公司内部网络资源时&#xff0c;实现安全的连接和数据传输。以下是对VPN的详细介绍&#xff1a; 选择代理浏览器…

QLExpress入门及实战总结

文章目录 1.背景2.简介3.QLExpress实战3.1 基础例子3.2 低代码实战3.2.1 需求描述3.2.1 使用规则引擎3.3.2 运行结果 参考文档 1.背景 最近研究低代码实现后端业务逻辑相关功能&#xff0c;使用LiteFlow作为流程编排后端service服务, 但是LiteFlow官方未提供图形界面编排流程。…

(2024,RWKV-5/6,RNN,矩阵值注意力状态,数据依赖线性插值,LoRA,多语言分词器)Eagle 和 Finch

Eagle and Finch: RWKV withMatrix-Valued States and Dynamic Recurrence 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. Eagle/Finch 架构 4. 方法 4.1 Eagle 4.1.1 Eagle…

UE5 像素流web 交互2

进来点个关注不迷路谢谢&#xff01; ue 像素流交互多参数匹配 主要运用像素流的解析json 状态&#xff1a; 测试结果&#xff1a; 浏览器控制台&#xff1a; 接下来编写事件传递 关注下吧&#xff01;

Android 逆向学习【1】——版本/体系结构/代码学习

#Android 历史版本 参考链接&#xff1a;一篇文章让你了解Android各个版本的历程 - 知乎 (zhihu.com) 三个部分&#xff1a;api等级、版本号、代号&#xff08;这三个东西都是指的同一个系统&#xff09; API等级&#xff1a;在APP开发的时候写在清单列表里面的 版本号&…

OrangePi AIpro初识及使用大模型GPT-Neo-1.3B测试

OrangePi AIpro介绍 1.1. 开发板简介 Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能AI 开发板&#xff0c;其搭 载了昇腾AI 处理器&#xff0c;可提供8TOPS INT8 的计算能力&#xff0c;内存提供了8GB 和16GB 两种版本。可以实现图像、视频等多种数据分析与推理…