寻求方案，解决 WEB 端，循环播放固定的视频播放带来的大量的流量消耗问题。

2023-12-18 13:41:22 +08:00
 leyfung

寻求方案，解决 WEB 端，循环播放固定的视频播放带来的大量的流量消耗问题。

问题产生：可视化大屏中有视频播放功能，每天会一直播放，消耗大量的流量。

需求：减少流量的消耗。

目前的方案：使用浏览器缓存，设置视频缓存过期时间。

有不有更好的方案？因为浏览器有缓存大小的限制，视频循环播放一轮之后，缓存会被清理。

8406 次点击
所在节点    程序员
79 条回复
tomatocici2333
2023-12-18 13:48:41 +08:00
最简单的就是让视频读本地的。按照需求更新本地视频
wangtian2020
2023-12-18 13:57:11 +08:00
最正确的方法是在资源的请求头上做设置
最保底的方法请求之后用 buffer 之类的变量存着
ntedshen
2023-12-18 13:59:12 +08:00
不刷新的话，直接 new 个 blob 丢内存里？
leyfung
2023-12-18 13:59:32 +08:00
@wangtian2020 设置了缓存过期时间，但是浏览器对缓存大小有限制，要手动改浏览器配置，现在就是这么干的
qinjiang
2023-12-18 13:59:48 +08:00
首次加载使用远端视频，同时缓存到本地。读取本地是否存在视频文件，不要局限于浏览器本身，可以存放在磁盘里。
leyfung
2023-12-18 13:59:51 +08:00
@tomatocici2333 这样换了电脑就不行了
murmur
2023-12-18 13:59:54 +08:00
大屏不一般是本地部署么，直接弄一个电脑接上去想干啥干啥
leyfung
2023-12-18 14:00:34 +08:00
@qinjiang JS 不能直接读取本地文件
murmur
2023-12-18 14:00:41 +08:00
@leyfung 思路狭窄了，大屏比电脑贵多了，那种只能跑一个程序的小电脑想做多便宜多便宜，120gssd 还不够缓存视频的么
leyfung
2023-12-18 14:01:18 +08:00
@murmur 大屏不止一个地方用，所以不是本地
leyfung
2023-12-18 14:03:59 +08:00
@murmur #9 目前就是用的缓存方案，领导觉得不好，需要用户配置浏览器
LancerComet
2023-12-18 14:04:30 +08:00
你可以使用 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 中能看到被缓存的视频
wangtian2020
2023-12-18 14:05:11 +08:00
我之前做大屏都是打包后 dist 文件塞进一个 webview apk 里，你先确定自己的看板运行在什么设备上。
普通的电视、安卓，可以自己打包成 apk ，然后你想干啥都行了。
murmur
2023-12-18 14:08:04 +08:00
@leyfung 那就是我思路狭隘了，如果中间是动画或者企业宣传 logo 本地缓存就可以了，甚至可以把中间改成 gif 或者 css 动画来规避流量

如果是生产实时监控那就只能让流量跑着
leyfung
2023-12-18 14:11:10 +08:00
@LancerComet 每个浏览器都硬性限制了一个域下缓存数据的大小，视频播放一轮就超过了浏览器的最大限制了。
drymonfidelia
2023-12-18 14:13:52 +08:00
不该 electron 套壳的时候底下一堆人推荐 electron 这时候反而没人推荐了
lycpang
2023-12-18 14:14:19 +08:00
1. 压缩原始视频，做到最小不失真的效果
2. 视频分片，本地能缓存多少就缓存多少，缓存不了的用远端的

这样就从 100%流量消耗，变成了 10%。也不是也能优化 90%的流量问题么
leyfung
2023-12-18 14:16:20 +08:00
@murmur #14 也不是实时吧，就是放了十几个的短视频，视频是在线的。定时会更换一批视频。
Cheons
2023-12-18 14:16:36 +08:00
预览选取界面用 gif 环视图
二级菜单再调用接口实时预览？

动效在 UI 动画上体现呗
leyfung
2023-12-18 14:17:06 +08:00
@tomatocici2333 还有个问题就是 浏览器好像是不让你直接读取本地文件的

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1001322

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX