蒲小花的博客
·
HTML5 Video VideoPlaybackQuality 实现丢帧统计
原文中文，约1800字，阅读约需5分钟。
📝
内容提要
本文介绍了使用VideoPlaybackQuality对象统计Web视频播放质量的方法，包括丢帧比例、已创建和丢弃帧数数量总和、已丢弃帧数数量值和损坏帧数数量的值。需要注意网速过低、丢帧波动等情况，建议通过去噪声的手段来规避大范围波动的情况。
🎯
关键要点
-
在Web开发中，Video元素用于视频播放，VideoPlaybackQuality对象用于统计丢帧率。
-
VideoPlaybackQuality对象提供了一系列描述视频播放质量的指标，主流浏览器均已支持。
-
可以通过HTMLVideoElement.getVideoPlaybackQuality()方法获取VideoPlaybackQuality实例。
-
VideoPlaybackQuality包含creationTime、totalVideoFrames、droppedVideoFrames和corruptedVideoFrames等属性。
-
丢帧比例的计算公式为droppedVideoFrames / totalVideoFrames。
-
hls.js-fps-controller.ts使用相关API来控制播放质量。
-
在实践中需考虑网速过低和丢帧波动等情况。
-
建议通过去噪声手段来规避大范围丢帧波动。
🏷️
