How to step one frame forward and one frame backward in video playback?

You can seek to any time in the video by setting the currentTime property. Something like this:

var video = document.getElementById('video'), frameTime = 1 / 25; //assume 25 fps

window.addEventListener('keypress', function (evt) {
    if (video.paused) { //or you can force it to pause here
        if (evt.keyCode === 37) { //left arrow
            //one frame back
            video.currentTime = Math.max(0, video.currentTime - frameTime);
        } else if (evt.keyCode === 39) { //right arrow
            //one frame forward
            //Don't go past the end, otherwise you may get an error
            video.currentTime = Math.min(video.duration, video.currentTime + frameTime);
        }
    }        
});

Just a couple things you need to be aware of, though they shouldn't cause you too much trouble:

1. There is no way to detect the frame rate, so you have to either hard-code it or list it in some lookup table or guess.

2. Seeking may take a few milliseconds or more and does not happen synchronously. The browser needs some time to load the video from the network (if it's not already loaded) and to decode the frame. If you need to know when seeking is done, you can listen for the 'seeked' event.