javascript - 视频时长不正确

Question

我有一个问题。 Html5 视频的持续时间与我从 ffmpeg 获得的持续时间不同。这是例子。在此视频中有 250 帧和 10s，帧速率 - 25fps。在浏览器中，此视频的持续时间为 10.026667 秒和 251.666675 帧。视频末尾是两个重复的帧。对我来说，重要的是帧数与现实相对应。为什么会发生这种情况，我该如何解决？ http://jsfiddle.net/Ck6Zq/196/

  <div class="frame">  
      <div id="current">1</div>
      <div id="duration">1</div>
  </div>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<button onclick="document.getElementById('video').currentTime += (1 / 25);">Next Frame</button><br/>

var currentFrame = $('#currentFrame');
var video = $('#video');

$("#video").on(
    "timeupdate", 
    function(event){
        onTrackedVideoFrame(this.currentTime, this.duration);
    }
);

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime + '  ' + (currentTime*25+1));
    $("#duration").text(duration + '  ' + (duration*25+1));
};

Answer 1

我认为主要问题在于您计算帧数的方式。
似乎没有可靠的方法逐帧浏览 html5 视频，但 chrome 和 Firefox 确实提供了一些 statistics infos .

通过检查webkitDecodedFrames || mozParsedFrames，您将获得有关浏览器实际从媒体中解复用和提取的帧数的更可靠信息。
Firefox 还有一个 mozPresentedFrames 计数器，可以让您检查呈现给渲染管道的帧数。

$('#video').on('ended', function(e){           $("#realDur>span").text(this.mozParsedFrames||this.webkitDecodedFrameCount);
});
$("#video").on(
    "timeupdate", 
    function(event){
        onTrackedVideoFrame(this.currentTime, this.duration, this.mozPresentedFrames );
    }
);

function onTrackedVideoFrame(currentTime, duration, rCur, rDur){
    $("#currentTime>span").text(currentTime);
    $("#currentFrame>span").text(currentTime*25+1);
    $("#duration>span").text(duration);
    $("#durationFrame>span").text(duration*25+1);
    $("#realCur>span").text(rCur);
};

span{float: right; margin-right: 6em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">  
      <div id="currentTime">browser's current Time<span></span></div>
      <div id="duration">browser's video duration in Time<span></span></div>
      <div id="currentFrame">script calculated current frame<span></span></div>
      <div id="durationFrame">script calculated duration in frames<span></span></div>
      <div id="realCur"> browser calculated current frame<span></span></div>
      <div id="realDur"> browser calcutated duration in frames<span></span></div>
  </div>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<button onclick="document.getElementById('video').play()">Play</button><br/>