Question

我有问题。 Html5视频的持续时间与我从ffmpeg获得的持续时间不同。这是一个例子。在这个视频有250帧和10帧，帧率 - 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/>

视频持续时间不正确

1 个答案: