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

143 天前
 leyfung

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

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

需求：减少流量的消耗。

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

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

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

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

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

动效在 UI 动画上体现呗
leyfung
143 天前
@tomatocici2333 还有个问题就是 浏览器好像是不让你直接读取本地文件的

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

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

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

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

© 2021 V2EX