前端 on Colinx Blog

论如何下载任意网站视频

Mon, 09 May 2022 00:00:00 +0000

视频已然成为当今互联网上信息传播的一个重要载体，有时会需要下载一些网上某个站点的视频插入 PPT，或者视频素材，无论是自己用抑或单纯是给朋友帮个忙，掌握一些使用的下载视频的小技巧总是不会错的，这里分享一些自用的小技巧，包括热门站点下载工具，以及应对冷门网站视频下载的技巧，应该可以覆盖 99.9% 的视频下载场景

冷门站点普通视频资源下载

冷门站点的资源得我们自己动手了，不过利用浏览器的开发人员工具还是很容易获取的资源的。右键找到开发人员选项打开开发人员工具，可以点击左上角的按钮选择网页元素，找到<video>标签，里面一般会有一个链接地址，复制地址打开即可。

这种简单的视频嵌入很容易下载，浏览器工具也很容易嗅探到。比如可以使用专业视频下载工具插件，你可以访问 360 插件中心下载。这种工具很多，这里不再赘述

链接后缀为mp4的一般来说都是说明该网页上面的视频只是从那一个文件加载的，没有经过分片和其他处理。如果没有后缀名，或者是flv、ts或者链接含有m3u8字样的，说明该网页的资源是经过分片的，需要我们动点手段。

冷门站点 m3u8 动态分片视频资源下载

以中国庭审网的庭审录像视频为例，打开开发者工具定位到视频的部分发现 video 标签里面的 url 很奇怪，访问该链接也并不能访问到有效的视频。这种网页一般都是通过 m3u8 来下发分片文件的信息

打开开发者工具的网络选项卡，监听网络活动，点击播放视频，会多出来很多条目分别代表每一个网络请求。在搜索框输入 m3u8 来进行过滤。定位到该请求后可以在新标签页打开，保存这个 m3u8 文件。

之后我们可以利用 ffmpeg 载入这个 m3u8 文件并进行合并，如有需要可一并进行转码操作

ffmpeg -i xxxx.m3u8 -c xxxx.mp4

如果报错提示不支持的 protocol，那么需要再加个参数让 ffmpeg 使用 http 下载

ffmpeg -protocol_whitelist concat,file,http,https,tcp,tls,crypto -i xxxx.m3u8 -c copy xxxx.mp4

接下来等待命令跑完，我们就可以得到需要的视频文件了。

其他常用处理命令

使用-i参数读取文件，查看详细参数

ffmpeg -i xxxx.mp4

使用 ffmepg 提取视频中的音频部分，方便后续处理。比如要生成字幕或是转写为文本，省的上传几百兆的视频文件。网易见外工作台做这些很方便，而且免费额度也很足，安利一波

ffmpeg -i xxxx.mp4 -vn -codec copy xxxx.aac

解析并下载 m3u8 视频的其他方案

使用硕鼠解析：https://www.flvcd.com/index.htm
使用 Chrome 插件：CoCoCut，猫抓 (cat-catch)
使用油猴脚本：m3u8-downloader，配套工具地址
使用软件：NeatDownloadManager

以上

前端静态资源加载的一些优化

Fri, 06 May 2022 00:00:00 +0000

最近在折腾优化博客，由于全站都是部署在 Netlify、Vercel 的 CDN 上，都是海外节点，国内访问延迟高，在想办法优化下访问速度和体验。线路部分的优化可以看另一篇文章国外静态网站托管服务商国内速度对比及线路优化。这篇文章来探讨下前端 CSS 和 JS 资源的加载。

优化目标主要就两个：

尽可能快，但是不希望我引入的辅助性第三方库影响到页面体验，不要阻塞主要内容渲染
为了快第三方静态资源肯定是上 CDN，但是要有容灾，CDN 挂了要能 fallback 到其他 url

静态资源异步加载

prefetch、preload这些预加载技术暂且不谈，博客站点没那么多资源。这里主要是用async和defer来控制脚本异步加载，以避免阻塞 DOM 解析和页面渲染。

使用async异步加载，对于pangu这种会影响到内容呈现的使用async，对于统计类第三方库使用defer延迟加载，到 DOM 加载完再执行

有些第三方库需要手动 init，这样就不能使用defer、async关键字加载资源了，defer和async关键字只适用于远程资源，本以为把远程资源的<script>和内嵌在 HTML 里用来 init 的<script>都加上defer就可以利用它顺序加载的特性解决这个问题，结果发现不是这样的。。。。异步打乱脚本执行顺序，init 脚本不等待资源下载完毕会先执行。利用好onload事件可以解决这个问题。

before

<script src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
<script>
pangu.spacingElementByClassName('post');
pangu.spacingElementByTagName('p');
document.addEventListener('DOMContentLoaded', () => {
pangu.autoSpacingPage();
});
</script>

after

<script>
function panguSpaing() {
pangu.spacingElementByClassName('post');
pangu.spacingElementByTagName('p');
document.addEventListener('DOMContentLoaded', () => {
// listen to any DOM change and automatically perform spacing via MutationObserver()
 pangu.autoSpacingPage();
});
}
</script>
<script async onload="panguSpaing()" src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>

除了onload还有onerror，还可以利用onerror事件在资源加载失败时 fallback 到其他 CDN，详见下文

这里跑了个测试看下优化前后的差距

优化前

First Contentful Pain Time 在 1.5s，整个页面到 1.5s 才能可见，DOM 加载总时间达到了 2.5s

本来我都已经把首页不需要加载的三方库都拿走了，但是还剩下一个，这个用于前端性能监控的 js 阻塞了渲染，挂的是腾讯云的 CDN，国内快到飞起，国外就卡到不行（作为对比上图里从 jsdelivr 加载的 js 也是快到飞起，墙内就慢得一批）

优化后

优化后页面没有再阻塞，0.8s 页面就可用了，总 DOM 加载时间只有 1.5s，相较之前简直直接起飞。

国内某检测平台的结果也显示优化效果明显

静态资源 Fallback 加载

国内好用的静态资源 CDN 还真没有，新浪那种只提供那么几个热门的库完全不符合需求，BootCDN 炸了不是一次两次，字节 CDN 的资源 URL 有够 ugly，URL 里面还带节点信息多半后面会出问题。360 奇舞 CDN 之前也换过域名、备案出问题，感觉每一个能省心用。七牛的目前看上去还行，也不知道后面会不会出什么幺蛾子。。。为了稳妥起见 + 照顾全球的访客，还是优先使用的 cloudflare 和 jsdelivr 的 CDN

网站主要三方库都是通过 jsdelivr 和 cloudflare 引入的，但是毕竟是海外的节点不知道哪一天就被墙了，所以还要为墙内的访客准备一个 fallback 方案。这里利用到script标签的onerror事件

现代浏览器都支持script和link标签上的onload和onerror事件，详细支持情况可以查看这里

https://pie.gd/test/script-link-events/

关于onerror，中文互联网上有好几篇文章说他会捕获script标签里的代码的执行错误。。。简直离谱。稍微查下 MDN 之类的文档就可以发现这玩意本来就是只捕获资源加载错误的

The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image).

https://www.w3schools.com/jsref/event_onerror.asp

利用好这个特性，就可以实现在资源加载失败时 fallback 从另一个 url 加载资源。

<script>
function fallbackJSloader(url, loadedEvent) {
console.log('Error loading asset, using fallback url');
console.log('load asset from', url);
let script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.async = true;
if (loadedEvent)
script.setAttribute('onload', `${loadedEvent}()`)
document.body.appendChild(script);
}
</script>
<script defer onload="init_gitalk()"
onerror="fallbackJSloader('https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.js','init_gitalk')"
src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js">

CSS 的 fallback 加载同理，此处不再赘述

优化后如图，在开发者工具中手动 block 资源网站，可以自动 fallback 从另一个 url 加载资源，这下网站的可用性又提升了一点点🤏哈哈哈

扩展阅读

网站 profile工具

https://www.webpagetest.org

前端 on Colinx Blog

论如何下载任意网站视频

热门网站电影/电视剧下载

热门站点普通视频资源下载

冷门站点普通视频资源下载

冷门站点 m3u8 动态分片视频资源下载

前端静态资源加载的一些优化

静态资源异步加载

静态资源 Fallback 加载

扩展阅读

前端 on Colinx Blog

论如何下载任意网站视频

热门网站电影/电视剧下载 #

热门站点普通视频资源下载 #

冷门站点普通视频资源下载 #

冷门站点 m3u8 动态分片视频资源下载 #

前端静态资源加载的一些优化

静态资源异步加载 #

静态资源 Fallback 加载 #

扩展阅读 #

热门网站电影/电视剧下载

热门站点普通视频资源下载

冷门站点普通视频资源下载

冷门站点 m3u8 动态分片视频资源下载

静态资源异步加载

静态资源 Fallback 加载

扩展阅读