由于很多免费 CDN 对单个文件的体积有限制,因此无法上传大文件。
不过有个黑科技可以突破这个限制:把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。
这里使用 NPM 空间演示。将测试文件 bbb.mp4 以每片 10MiB 切割:
mkdir -p bbb.mp4.parts
split -b 10MiB -d bbb.mp4 bbb.mp4.parts/
得到 00 、01 、02 、...、33 切片,然后逐个上传到 NPM:
npm.elemecdn.com/[email protected]/main.bin
npm.elemecdn.com/[email protected]/main.bin
...
最终效果:freecdn.etherdream.com/bbb.mp4
该文件实际并不存在,而是通过 Service Worker 虚拟出来的。如果用低版本浏览器访问就是 404 。
拖动视频进度条,程序会根据 Range 请求范围,加载相应的分片。
(打开控制台调试时不要勾选“禁用缓存”,否则请求可能不走 ServiceWorker )
事实上 NPM 有多个服务,例如 unpkg.com 和 npm.elemecdn.com 。因此当一个 CDN 速度慢时,Service Worker 可自动选择另一个,从而增加稳定性。
更多细节可查看:github.com/EtherDream/freecdn/tree/master/examples/file-split
1
xinyana 2022-05-19 18:28:50 +08:00 via Android
虽然这羊毛薅的有点过分,不过有点意思
|
2
learningman 2022-05-19 18:30:50 +08:00 via Android
挺恶心的,和之前那个拿 npm 分发 jar 包的一丘之貉
|
3
ch2 2022-05-19 18:32:11 +08:00
ios Safari 下水道了,不支持
|
4
eason1874 2022-05-19 18:33:10 +08:00 1
如果是视频切片的话,可以不用在服务端合并,切片后生成一个 m3u8 列表,网页前端播放器会根据播放进度从 m3u8 列表请求不同的文件,这样兼容 100%
|
5
cslive 2022-05-19 18:37:43 +08:00
记得之前有个用哔哩哔哩 cdn 这么搞的
|
6
mxT52CRuqR6o5 2022-05-19 18:47:24 +08:00 via Android
@learningman 有啥的啊,我们可最喜欢玩囚徒困境游戏了
|
7
yangg 2022-05-19 19:32:56 +08:00
你怎么上传到 npm 的?发个版本?
|
8
yaott2020 2022-05-19 19:35:21 +08:00 via Android
拼命薅羊毛的最后都无羊毛可薅
|
10
iqoo OP @yangg 每个切片对应一个包版本号,后面那个文档里有 shell 实现,这样比较简单而已。
当然这里出于简单而已,实际不推荐放 github 和 npm ,这两个空间可以放任意格式的文件,比较珍贵,白嫖可惜了。 实际最好的方案是放图床,知乎、B 站、简书这些。每个切片加个图片头,使用时跳过头长度就可以。 |
11
ragnaroks 2022-05-20 08:48:44 +08:00 1
在我上学那会黄网都是这样用正常网站的静态存储放黄片
|
12
byte10 2022-05-20 11:45:03 +08:00
把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。 我不太明白这个原理,下载文件的时候是在客户端浏览器进行合并 多个 part 吗
|
13
yin1999 2022-05-20 15:44:38 +08:00 via iPad
Service worker 是能够拦截网页的请求的,拦截请求以后,由 service worker 而非服务器直接响应请求
|
14
Yumine 2022-07-14 09:10:26 +08:00
npm.elemecdn.com 已经设置了访问权限
This XML file does not appear to have any style information associated with it. The document tree is shown below. <Error> <Code>AccessDenied</Code> <Message>You have no right to access this object because of bucket acl.</Message> <RequestId>62CF6CDE97E87C373698B17D</RequestId> <HostId>fe-static-zbprod-zb1-oss-3.oss-cn-zhangjiakou.aliyuncs.com</HostId> </Error> |