如何使用JavaScript测量视频的实际帧速率？

发布于 2025-01-22 23:48:48 字数 187 浏览 2 评论 0原文

假设使用＆lt; video＆gt;标签在HTML5页面上播放视频。我该如何测量实际的帧率？我不仅想阅读视频文件的帧速率（ eg 。

我希望可能有一个更直接的指标。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纸伞微斜 2025-01-29 23:48:48

您可以尝试尝试探索 videoplaybackquality ，也许它给出了它的指标。对您有用。
更具体地说， a href =“ https://developer.mozilla.org/en-us/docs/web/api/videoplaybackquality/totalvideoframes“ rel =“ nofollow noreferrer”>呈现的总框架值。

也许涉及这些结果以及requestAnimationFrame之类的其他选项？

我不确定您对项目的确切目标是什么。例如“我如何测量实际的帧速率？” 我个人可以将其解释为：

（1）视频解码器的速度每个帧（对于给定的视频类型）。
例如，每个帧的解码速度 @ 720p vs也许是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>

You could try exploring VideoPlaybackQuality, maybe the metrics it gives out can be useful to you.
More specifically the dropped frames or total frames presented values.

Maybe involving those results along with other options like requestAnimationFrame?

I'm not sure what your exact end-goal of your project is. For example "How can I measure the actual framerate?" I personally can interpret that as either:

(1) Speed of the video decoder per frame (for given video type).
For example the decoding speed of each single frame @ 720p vs maybe 4K resolution.

(2) Number of frames dropped per second.
Where you minus the FPS number against the dropped frames to know how many were presented.

Here is a quick/basic example usage of 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>

回复收藏 0 原文

~没有更多了~