I have a video element in my html page and I play frame by frame by seeking to the frame of my time by following this: HTML5 frame-by-frame viewing / frame-seeking?. This type of playback is choppy; my question is: if I had two frame times, would it be possible to smooth out the playback between them(I read about frame interpolation, but couldn't find any javascript libraries)?
player code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Playback Demo</title>
<script src=".9.1/jquery.js"></script>
<script src=".3.6/js/bootstrap.min.js"></script>
<link href=".3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<video id="videoElement" controls tabindex="0" autobuffer preload>
<source src=".mp4" type="video/mp4"></video>
</video>
<button type="button" id="playButton" onclick="playVideo()">Play Video</button>
<button type="button" id="stopButton" onclick="stopVideo()">Stop Video</button>
</body>
</html>
<script>
var playerObject = $('#videoElement')[0];
var handle = undefined;
var seekTime = 0;
function seekToTime(ts){
playerObject.pause();
playerObject.currentTime = ts;
}
function playVideo(){
handle = setInterval(function() {
seekTime = seekTime + 1;
seekToTime(seekTime);
}, 1000);
}
function stopVideo(){
clearInterval(handle);
seekToTime(0);
}
</script>