Setting currentTime for HTML5 video on Android not working properly

Question

I have created a set of custom navigation elements for a video, to simulate walking around a building (for fire training). When an overlay is pressed, the routine jumps to a predetermined spot using vidElmt.currentTime = 5; (for example). This works fine on Windows (Chrome, FF, and IE 11) and on the iPad (Safari), but when I try it on my Android phone (4.3, using Chrome or the built-in browser), the videos jump to the wrong spots. For example, if I set it to jump to the 5 second spot, it looks like it jumps to 2, 3 or 4 second spot.

I know some people may point out that I could be trying to jump to a spot not yet loaded, but I know the parts of the video I'm jumping to are definitely already loaded.

I wonder if it's something about my video format (mp4). I've searched to see if anyone has problems with the video tag and currentTime on Android, but I'm not finding anything.

Here is my demo link, if you want to check it out for yourself: http://eqsim.com/fesim/ when the playhead arrives at side/location, it should loop that specific section, and you can press the arrow keys that are lit up to change locations.

I'd appreciate any suggestions!

-jonathan

Answer 1

I suspect you might need to keep querying the video in an interval until the frame you want is seekable. A full working example can be found in this jsbin , but the relevant code is this:

  function isSeekable(time) {
    for (var i=0; i<video.seekable.length; i++) {
      if (video.currentTime > video.seekable.start(i) && video.currentTime < video.seekable.end(i)){
       return true
      }
    }
    return false
  }

Does that work for you? It seems to work in my Android 4.3 stock browser. If not, can you tell me more about how you encoded your video? Adding more keyframes could help with frame accuracy.