HTML5 video - frame accurate seeking on Android devices?

Question

I'm working on an app that requires frame accurate seeking on video in the browser, across desktop and mobile devices (including packaged apps with Cordova).

Desktop browsers work fine as do iOS devices (both as a packaged app and through Safari) but Android devices only seem to show key frames (aka intra frames or i-frames) in the video.

I've setup a test page on jsfiddle to help demo my problem.

The video has been encoded with ZenCoder. It has a frame rate of 23.976 and key frames every 250 frames. The video itself shows the current frame index so you can easily see that only the frames at 0, 250 and 500 frames are being displayed on Android devices, regardless of where you seek to.

At this stage I'd be happy with a solution that works in Android browsers or as a packaged app with Cordova (I've also tried using the Crosswalk WebView but to no avail).

Answer 1

The native Android playback mechanisms (MediaPlayer and MediaExtractor) don't support frame accurate seek (see here). That means that your HTML5 video playback would have to be built on top of something other than the Android frameworks. While it's possible to use another decoder, that sounds like more than a wrapper for a HTML5 app. So it seems like there are two approaches: live with keyframe seeking (perhaps with some adjustments like seeking to the previous keyframe, and then playing forward to the desired point), or build a hefty native wrapper / implementation for your app.