如何在前端统计用户观看视频所消耗的流量？求教啊，大神们！

[shidu2003]

问题说明

项目背景

项目使用腾讯云点播服务进行视频内容分发。需要实现前端视频流量监控功能，当用户观看视频消耗的流量达到特定阈值时，自动终止视频播放。同时会将相关数据记录到数据库，为统计页面做准备。

技术环境

• 前端框架：uni-app （ Web 端）
• 视频播放器：腾讯云视立方·播放器 SDK （ TCPlayer ）

已尝试方案

1. 使用 Performance API 监控
   • 尝试通过 performance.getEntriesByType('resource') 获取视频资源的 transferSize
   • 问题：transferSize 始终返回 0 ，无法获取实际流量数据
2. 通过播放器的 buffered() 方法估算流量
   • 实现思路：使用公式 (已缓冲时长 / 视频总时长) × 视频文件大小 计算流量消耗
   • 问题：当视频首次缓冲到 100% 后，即使用户拖动进度条触发新的数据下载，缓冲进度依然显示为 100%，导致无法统计到新增的流量消耗

待解决问题

1. 如何准确获取视频播放过程中的实时流量消耗

[collen]

Performance

[pangzipp]

类似使用 TS 切片。服务端下一个切片地址
因为码率对应的流量是固定的。 应该可以算出流量统计

[realpg]

ts 切片 head 请求每一个 ts 记录文件大小 相加

[shidu2003]

@pangzipp
@realpg
好的大佬们，我这就去试一下。

[defaw]

视频内容全部走 js 请求，然后把返回的 stream 包装一层，在包装层里统计流量消耗

[encro]

需求简化下，改为观看时长不就行了，其他正规网站都是这样做的呢。

[shidu2003]

@encro 大佬你好，这个因为公司项目使用了`腾讯云点播服务`，用的视频链接是腾讯托管的，走这个是服务是要消耗购买的腾讯云点播流量，所以公司要求统计这个消耗的流量。

云点播 VOD
面向音视频、图片等媒体，提供制作上传、存储、转码、媒体处理、媒体 AI 、加速分发播放、版权保护等一体化的高品质媒体服务。