推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
问题说明
项目背景
项目使用腾讯云点播服务进行视频内容分发。需要实现前端视频流量监控功能，当用户观看视频消耗的流量达到特定阈值时，自动终止视频播放。同时会将相关数据记录到数据库，为统计页面做准备。
技术环境
- 前端框架：uni-app （ Web 端）
- 视频播放器：腾讯云视立方·播放器 SDK （ TCPlayer ）
已尝试方案
-
使用 Performance API 监控
- 尝试通过
performance.getEntriesByType('resource')获取视频资源的transferSize - 问题：
transferSize始终返回 0 ，无法获取实际流量数据
- 尝试通过
-
通过播放器的 buffered() 方法估算流量
- 实现思路：使用公式 (已缓冲时长 / 视频总时长) × 视频文件大小 计算流量消耗
- 问题：当视频首次缓冲到 100% 后，即使用户拖动进度条触发新的数据下载，缓冲进度依然显示为 100%，导致无法统计到新增的流量消耗
待解决问题
- 如何准确获取视频播放过程中的实时流量消耗
9 条回复 • 2024-11-19 22:00:35 +08:00
 |
1
collen 7 天前
Performance
|
 |
2
pangzipp 7 天前
类似使用 TS 切片。服务端下一个切片地址
因为码率对应的流量是固定的。 应该可以算出流量统计 |
 |
3
realpg 7 天前
ts 切片 head 请求每一个 ts 记录文件大小 相加
|
 |
5
defaw 7 天前
视频内容全部走 js 请求，然后把返回的 stream 包装一层，在包装层里统计流量消耗
|
 |
6
encro 7 天前
需求简化下，改为观看时长不就行了，其他正规网站都是这样做的呢。
|
 |
7
shidu2003 OP @encro 大佬你好，这个因为公司项目使用了`腾讯云点播服务`，用的视频链接是腾讯托管的，走这个是服务是要消耗购买的腾讯云点播流量，所以公司要求统计这个消耗的流量。
云点播 VOD 面向音视频、图片等媒体，提供制作上传、存储、转码、媒体处理、媒体 AI 、加速分发播放、版权保护等一体化的高品质媒体服务。 |
 |
8
lanced 6 天前  1
仅靠前端没有办法准确获取视频流量消耗，跟视频传输协议，缓存策略，网络环境这些不可控因素有关，使用码率乘以播放时长可以得到一个大概的流量消耗。
虚假建议：统计流量限制用户的一般是 VPN 软件，可以参考 VPN 软件的统计思路。尝试在 app 中启动一个 nodejs 服务，用来代理 App 发出的所有请求，通过这个代理来准确统计流量。 真诚建议：跟产品讨论一下，修改需求。 |
Select Language