Incorrect Video Duration

Question

I have a problem. Html5 video have different duration than I get from ffmpeg. This is example. In this video have 250 frames and 10s, frame rate - 25fps. In browser this video have duration 10.026667s and 251.666675 frames. In end of video is two duplicate frames. For me it is important that the number of frames correspond to reality. Why is this happening and how can I fix it? 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));
};

How did you get those values? it seems strange that the number of frames (`webkitDecodedFrameCount`|| `mozParsedFrames`) returns floats. + for me results are different depending on the browser used but even the software used — Kaiido, Mar 09 '15 at 07:55

score 2 · Accepted Answer · edited May 23 '17 at 12:06

I think that the main problem comes from your way you count the frames.
There doesn't seem to be a reliable way to go through an html5 video frame by frame but chrome and Firefox do provide some statistics infos.

By checking webkitDecodedFrames || mozParsedFrames, you will have a more reliable info about the number of frames the browser actually demuxed and extracted out of the media.
Firefox also has a mozPresentedFrames counter that allows you to check the number of frames been presented to the rendering pipeline.

$('#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/>

Incorrect Video Duration

1 Answers1