寻求方案，解决 WEB 端，循环播放固定的视频播放带来的大量的流量消耗问题。
问题产生：可视化大屏中有视频播放功能，每天会一直播放，消耗大量的流量。
需求：减少流量的消耗。
目前的方案：使用浏览器缓存，设置视频缓存过期时间。
有不有更好的方案？因为浏览器有缓存大小的限制，视频循环播放一轮之后，缓存会被清理。
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1061 days ago, the information mentioned may be changed or developed.
 |
tomatocici2333Dec 18, 2023
1
最简单的就是让视频读本地的。按照需求更新本地视频
|
 |
wangtian2020Dec 18, 2023
2
最正确的方法是在资源的请求头上做设置
最保底的方法请求之后用 buffer 之类的变量存着 |
 |
ntedshenDec 18, 2023
3
不刷新的话，直接 new 个 blob 丢内存里？
|
 |
4
@wangtian2020 设置了缓存过期时间，但是浏览器对缓存大小有限制，要手动改浏览器配置，现在就是这么干的
|
 |
qinjiangDec 18, 2023
5
首次加载使用远端视频，同时缓存到本地。读取本地是否存在视频文件，不要局限于浏览器本身，可以存放在磁盘里。
|
|
6
@tomatocici2333 这样换了电脑就不行了
|
 |
murmurDec 18, 2023
7
大屏不一般是本地部署么，直接弄一个电脑接上去想干啥干啥
|
 |
LancerCometDec 18, 2023
12
你可以使用 Cache API：
```html <html> <head></head> <body> <video id="some-video" width="400" controls="controls"></video> <script> const makeCache = async () => { const cache = await window.caches.open('video-cache') const response = await fetch('/some-video.mp4') await cache.put('video-data', response) } const loadFromCache = async () => { const cache = await window.caches.open('video-cache') return cache.match('video-data') } const main = async () => { let videoResponse = await loadFromCache() if (!videoResponse) { await makeCache() videoResponse = await loadFromCache() } const videoBlob = await videoResponse.blob() const url = window.URL.createObjectURL(videoBlob) const videoElement = document.getElementById('some-video') videoElement.src = url } main() </script> </body> </html> ``` 运行以上代码后，可以在开发者工具的 Application 里的 cache storage 中能看到被缓存的视频 |
|
wangtian2020Dec 18, 2023
13
我之前做大屏都是打包后 dist 文件塞进一个 webview apk 里，你先确定自己的看板运行在什么设备上。
普通的电视、安卓，可以自己打包成 apk ，然后你想干啥都行了。 |
|
murmurDec 18, 2023
14
|
|
15
@LancerComet 每个浏览器都硬性限制了一个域下缓存数据的大小，视频播放一轮就超过了浏览器的最大限制了。
|
 |
16
不该 electron 套壳的时候底下一堆人推荐 electron 这时候反而没人推荐了
|
2 |
lycpangDec 18, 2023
17
1. 压缩原始视频，做到最小不失真的效果
2. 视频分片，本地能缓存多少就缓存多少，缓存不了的用远端的 这样就从 100%流量消耗，变成了 10%。也不是也能优化 90%的流量问题么 |
 |
CheonsDec 18, 2023 via Android
19
预览选取界面用 gif 环视图
二级菜单再调用接口实时预览？ 动效在 UI 动画上体现呗 |
|
20
@tomatocici2333 还有个问题就是 浏览器好像是不让你直接读取本地文件的
|
|
LancerCometDec 18, 2023
21
@leyfung 我认为您可以先试一下，这个不是默认的 http caching ，可以阅读一下文档： https://developer.mozilla.org/en-US/docs/Web/API/Cache
|
|
22
@LancerComet #21 好的 ，感谢，我测试一下吧，这个文档我也看了
|
 |
tool2dDec 18, 2023
23
超大文件不太适合用浏览器默认缓存。假设一个高清短视频 200M ，那么十几个要好几个 G 了，
最好就是本地启动一个 http web 代理服务器，有本地写入权限。 让 js 来访问本地服务器的视频，顺便把视频都缓存到用户磁盘上。 |
|
24
是个办法👍
|
 |
iosyyyDec 18, 2023
26
@drymonfidelia 你先搞清楚 electron 事干啥的好吗? 这 tm 是 web 端需要 electron 吗?
|
 |
AllenCaiDec 18, 2023
27
indexDB 试试
|
|
tool2dDec 18, 2023
28
@jiangzm 有 API 的，只要用户点同意，就能读取了。
按照道理来说，JS 能访问本地系统文件并不安全，但是大屏应用无所谓的。 https://developer.chrome.com/docs/capabilities/web-apis/file-system-access |
|
drymonfideliaDec 18, 2023
29
@iosyyy 他不是说浏览器没权限吗 那就只能 electron 打包个客户端啊
|
 |
ZZITEDec 18, 2023
30
Service Worker 了解一下
简单的说可以代理你的请求，可以制定自己的缓存策略精细化管理缓存，可以把缓存的内容写到用户本地磁盘上 |
 |
duke807Dec 18, 2023 via Android
31
视频用 av1 压缩，大小直接变小很多，小于浏览器缓存大小的限制
|
 |
jspatrickDec 18, 2023
34
你需要 indexedDB ，理论上浏览器所在盘有多大空间它就能吃多大，所以要记得清理过期数据
|
 |
MENGKEDec 18, 2023
35
循环播放就只加载一边就缓存了啊，为啥会消耗大量流量呢？
|
 |
Masoud2023Dec 18, 2023
37
|
|
Masoud2023Dec 18, 2023
39
难道视频太大了这个会失效？我没试过，至少 youtube 我没遇到过这样的问题
|
 |
ddch1997Dec 18, 2023
41
赞同 30LService Worker 这个方案，这个方案出来是解决断网的情况下依旧能访问应用以及有最近的数据，缓存视频应该不是什么问题
|
 |
jazzg62Dec 18, 2023
44
包装成 electron ，就能解决缓存限制
|
 |
paopjianDec 18, 2023
45
压缩一下视频,是不是能降低一些大小
|
|
iosyyyDec 18, 2023
46
|
 |
jackSanDec 18, 2023
47
如果是 公开的把视频放流媒体平台 比如抖音 b 腾讯啥的，不是公开的 就放客户本地
|
|
MENGKEDec 18, 2023
48
1. 压缩视频。
2. 切割视频。 3. 楼上给出过的 IndexedDB 等保存在本地。 这三种方法应该是相对你当前的项目改动最小的。 |
 |
luxferrewDec 18, 2023
49
资源又大，又要缓存，直接 indexDB ，挺方便的。
以前有个 web 项目要加载模型文件（接近 1G 了）就这么搞的 2333 。 如果还要省就考虑压缩视频、换 GIF 图等等...看你们领导需求了... |
 |
peterguiDec 18, 2023
50
rsync + local_server
|
 |
ltmstDec 18, 2023
51
我倒是觉得可以写个服务放到大屏电脑上
就定时轮训服务器视频是否更新了，更新就下载到大屏服务器上 然后大屏 web 写逻辑直接获取本地视频 |
 |
fengbjhqsDec 18, 2023 via Android
54
这个本地跑的服务，本地启动，浏览器打开本地地址，
|
 |
TsubasaHanekawDec 18, 2023
55
那就不要用浏览器阿,最简单的 winform 套个 cerf 的壳都行
|
|
56
感谢大家的回复，下面是可以满足我需求的方案：
方案一：使用浏览器缓存，设置视频缓存过期时间；缺点是需要配置浏览器。 方案二：使用 IndexedDB 。 方案三：单独编写后端服务，后端读取在线文件后，将文件保存至本地，由前端页面请求本地后端服务获取文件。 方案四：Service Worker 。(查了一下，好像有大小限制，大屏上的视频加起来有五六百 M ） 接下来，试一下方案二。最后考虑方案三，或者就保持方案一。🤝 |
 |
L1shenDec 18, 2023
57
Service Worker 的 cache 大小限制是跟着浏览器限制走的，一般来说可以很大
你可以通过 navigator.storage.estimate() 方法来查询可以用到多少，一般来说五六百 M 根本不是问题 |
|
58
找到了一个 DEMO ，有需要的可以参考 http://t.csdnimg.cn/kJqnn 实现图片本地化 ServiceWorker + IndexedDB
|
 |
xinghen57Dec 18, 2023 via iPhone
59
本地搭个服务端可否？
视频换 vp9 等最新编码，体积能比 x.264 小一半。 |
 |
54xavierDec 18, 2023
60
@drymonfidelia #16 对啊，其实我觉得这搞个 electron 客户端不就好了吗？然后就可以 download 视频到磁盘，并且可以直接 读取磁盘文件，就可以用文件的方式来缓存视频了。
|
 |
sub166Dec 18, 2023
61
浏览器高版本的话可以试试 opfs
|
 |
zeusho871Dec 18, 2023
62
有的网站发现你视频在后台 它给你播放音频 不加载视频 等于他视频和音频是不同的流
|
 |
TokinDec 18, 2023
63
多大的视频内容，试试存到 IndexDB ？
|
 |
kanegDec 18, 2023 via iPhone
64
浏览器限制的是一个域名下的缓存大小，能不能切割成多个文件，分布在多个域名下，每个域名下不要超出限制，当然这个方案需要你能控制服务器的域名。
|
 |
dcdloveDec 19, 2023
65
浏览器缓存都没弄明白还说有大小限制，真是服了
|
 |
cherryasDec 19, 2023
67
多少年前就有的成熟方案，外接个硬件控制。你非要纯技术解决
|
 |
vultrDec 19, 2023
68
你加个本地 cdn 服务器就好了，反正都用上大屏了，本地也应该有电脑的，配置个 cdn 就行了。
|
 |
cijiugechuDec 19, 2023
69
把视频切成几块 Blob 或 ArrayBuffer 后存 IndexdDB 里，IndexedDB 几乎没有大小限制
|
 |
72
原生 video 标签和视频响应头中加 Cache-Control 不就可以了，还能有啥？
|
 |
dodeDec 19, 2023
73
前端实现多个视频播放组件，轮流播放，隐藏切换布局，
|
 |
hongchends1Dec 19, 2023
75
可以本地起个 server 或者 打包成应用
|
 |
suke119Dec 19, 2023
76
推荐本地化磁盘文件的 api ，最差就纯内存那就 MEMFS+Wasm.. 1 个 G 视频绰绰有余，有单独的 memfs npm 包，不过我因为视频有其他操作直接用的 ffmpeg 的
``` await ffmpeg.writeFile('input.mp4', inpf); //读取视频数据 let memfsData = ffmpeg.FS('readFile', 'suke.mp4'); //创建虚拟 URL this.transcodeUrl = URL.createObjectURL(new Blob([memfsData.buffer], { type: "video/mp4" })); ``` |
|
77
 经过测试，可以使用 indexedDB 存储比较大的视频文件，感谢各位的耐心解答 |
|
78
@leyfung #77 用的 yux-storage 是一个基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库。https://github.com/yued-fe/yux-storage 阅文前端团队开发的
|
 |
uyoungcoDec 27, 2023
79
前几天看了帖子没觉得什么，今天这也让我遇到了 感谢 op ，我学习了
|
Select Language