假设在使用<video>标记的HTML5页面中播放视频。我如何测量实际帧率?我不只是想读取视频文件的帧率(例如，而是浏览器在实践中能够管理的内容)。
(我猜它将有可能破解一些涉及requestAnimationFrame，但我隐约担心，在一些系统上，视频播放将从页面的其余部分解耦，导致不正确的结果;另外，我希望有一个更直接的指标。)
你可以尝试探索VideoPlaybackQuality，也许它给出的指标对你有用。
更具体地说，是丢失的帧或总帧呈现的值。
可能涉及这些结果以及其他选项，如requestAnimationFrame?
(1)视频解码器的速度每帧(对于给定的视频类型)。
例如，每帧的解码速度@ 720p与4K分辨率。
(2)每秒丢弃的帧数.
在这里，你减去FPS数和丢弃帧数，以知道有多少帧被呈现。
下面是VideoPlaybackQuality的一个快速/基本使用示例:
<!DOCTYPE html>
<html>
<body>
<video id="myvid" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<br><br>
<text id="mytxt"> </text>
</body>
<script>
var mytxt = document.getElementById("mytxt");
var myvid = document.getElementById("myvid");
var fps = 30; //# use real FPS of input video
var vid_data; //# an Object for VideoPlaybackQuality
var myInterval; //# to check Quaity statistics every second
var vidPaused = false;
myvid.addEventListener('play', onVidEvents);
myvid.addEventListener('pause', onVidEvents);
myvid.addEventListener('ended', onVidEvents);
function onVidEvents()
{
if (event.type == "play")
{
vidPaused = false;
myInterval = setInterval(check_framesQuality, 1000);
}
if (event.type == "seeked")
{ vid_data = myvid.getVideoPlaybackQuality(); update_text(); }
if (event.type == "pause")
{ vidPaused = true; clearInterval(myInterval); }
if (event.type == "ended")
{ clearInterval(myInterval); vidPaused = true;}
}
function check_framesQuality()
{
if( vidPaused == false )
{
vid_data = myvid.getVideoPlaybackQuality();
update_text();
}
}
function update_text()
{
mytxt.innerText = "Total Decoded Frames : " + vid_data.totalVideoFrames
+ "n" + "Dropped Frames : " + vid_data.droppedVideoFrames
+ "n" + "===================="
+ "n" + "Video Time (secs) : " + Math.round( myvid.currentTime )
+ "n" + "Expected Frames : " + Math.round( fps * myvid.currentTime )
//# received frames == ( expectedFrames - DroppedFrames )
+ "n" + "Received Frames : " + ( Math.round( fps * myvid.currentTime) - vid_data.droppedVideoFrames)
}
</script>
</html>