2

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

user150812
  • 99
  • 1
  • 9
  • How do you know that part of the video is seekable? Try checking if video.seekable.end(0) > 5 – TimHayes Mar 07 '14 at 03:25
  • Thanks for the suggestion, but I know it is seekable because it is jumping back to the wrong time -- the playhead is already at, say, 10 seconds, and it jumps back to 3 (though it is told to jump back to 5 -- the timing is grossly inaccurate). – user150812 Mar 07 '14 at 13:18
  • It doesn't look seekable to me on the default 4.3 Android browser. If you wait until the loadedmetadata event fires, the video element returns a duration of 1 second with a seekable timerange of 0-1. See http://jsbin.com/zugal/2/ – TimHayes Mar 07 '14 at 14:28
  • Hi Tim, your observation and examples are helping me a lot to uncover the problem. Both Windows and iOS show duration of 80 seconds, but Android (Chrome) says 0 seconds. I wonder if it has to do with the movie encoding somehow? I certainly would appreciate it if you had any suggestions about this discrepancies. Thanks for your time and help! – user150812 Mar 07 '14 at 18:03
  • Interestingly, on the Android stock browser, once I hit play I'm getting a seekable time first of 100 seconds (the video is only 80 seconds long), then once I'm into it, I'm getting the correct seekable time. Meanwhile, on Chrome, seekable time remains 0. On BOTH browsers, the video is jumping to the wrong spot -- on the stock browser, it should jump correctly since it's getting the right seekable time. On Chrome, who knows what error is being thrown because the navigation overlays are not being rendered. Argh!! – user150812 Mar 07 '14 at 18:51
  • @user150812 : did anyone found solution to this ? I am facing the exact same problem .. setting it to 5 sec sets it to some time before it ( only on android ) – Agrawal Jul 20 '15 at 16:22

1 Answers1

3

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.

TimHayes
  • 3,684
  • 21
  • 26
  • Thanks Tim, that helped on the stock Android browser, so now it seems I'm just down to a problem on Android Chrome. The video duration keeps coming back as 0. The weird part is that clicking on the video play will start the video, but the overlays are not there -- I think there must be some kind of error being thrown that then gives up on the rest of the code. – user150812 Mar 12 '14 at 02:05
  • Strange. On the jsbin I created, the duration is reported correctly on my Samsung Note II (Android 4.3) with Chrome. – TimHayes Mar 12 '14 at 03:00
  • Now I got the video playing on Android Chrome (Galaxy S4, Android 4.3), by offering a webm version, based on http://stackoverflow.com/questions/16773986/html5-video-issue-with-chrome?rq=1 (I also threw in ogg, to boot). So it's working on Chrome and stock Android, for 4.3, yay! It's still not working an older Android I have (Toshiba Thrive, Android 3.1), but I'm a lot further ahead. Thank you for your insights. – user150812 Mar 12 '14 at 04:37
  • Adding a webm version is a good practice for other browsers, but I've stopped using ogg these days. Glad it is working better for you. And just so you know, the event support on old versions of Android can be terrible. Best of luck to you on that front. – TimHayes Mar 12 '14 at 20:21
  • Thanks, Tim, things looked promising until I updated Android to 4.4.2, and it stopped working again. I haven't looked at the code since then, but I did post the work on GitHub. Eventually I'll look back at it to correct it, https://github.com/JonKaye/nonlin-video-player – user150812 Jun 10 '14 at 05:21
  • I didn't see your comment, Phil. The project I needed this for was sidelined, so I went to work on something else. I did post the code at GitHub if you want to check it out, I figure I will break out the remote Android debugger with Chrome once I get back to figuring out what happened (here is my project: https://github.com/JonKaye/nonlin-video-player). – user150812 Jul 20 '14 at 05:31