HTML5-video - autoplay

by steveseguin

HTML

<video autobuffer controls=true autoplay id='vid'>
    <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<br>guessed frame duration (ms) :
<div id='res'></div>

CSS

html {
    padding: 20px 0;
    background-color: #efefef;
}
body {
    width: 400px;
    padding: 40px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
video {
    width: 400px;
    display: block;
}

JavaScript

var myVideo = document.getElementById('vid');
var res = document.getElementById('res');

var guessingInterval = setInterval(guessFrameRate, 10);

var guessCount = 0;
var lastSeenTime = -1;
var guessedFrameRate = 0;
var durationCumul = 0;

function guessFrameRate()  {
    var currentVideoTime = 1000 * myVideo.currentTime
    var dt = currentVideoTime - lastSeenTime;
    dt = Math.ceil(dt * 10) / 10;
    lastSeenTime = currentVideoTime;
    if (dt == 0) return;
    if (guessCount++ == 0) return;
    console.log(dt);
    durationCumul += dt;
    res.innerHTML = durationCumul / guessCount;
}