HTML5 Video: HLS stream has no progress bar on HTC One device running Android 4.1.2

Question

There is no progress bar on my HTML5 HLS stream when viewing on a HTC One running Android 4.1.2. Works fine on same device running 4.4.2 here is my jsbin:

http://jsbin.com/gokowovo/

Note: The stream is part of a hybrid app, to replicate you need to test in the Android default browser, works fine in Chrome.

I know the progress bar has no use on the stream, it purely for aesthetics.

Answer 1

HLS support on Android is partial. It has made significant progresses in the latest releases but you will still find issues depending on the device and the Android version it is running. This article from JW player sums up the situation up to Android 4.1:

Android 2.3 (Gingerbread)

No Support, despite being the most popular version of Android

Android 3.0 (Honeycomb)

Streams cause tablet devices to crash

Android 4.0 (Ice Cream Sandwich)

VOD streams do not seek
Aspect ratios are not detected and cause image deformation
Fullscreen causes videos to restart from the beginning

Android 4.1+ (Jelly Bean)

Aspect ratio issue is fixed, but seek is still unavailable
Chrome does not understand HLS leading to broken mimetype detection
Taking video fullscreen causes devices to throw an error and stop.

As you can see there are known issues for live and on demand streaming - especially for seeking in a stream which relates to your question - for Chrome and the native Android browser (not to mention the others). If you stream live and want to target Android under 4.1 RTSP is the preferred solution (RTSP will also suit other devices like Blackberry).

You could think about building your own set of HTML5 video controls to have more control over the layout of your video player but if you go that road I suggest you keep it to the basic functionality you need for the Android part of your project.

You might want to look at MPEG DASH as well. It has a JS lib that begins to exhibit support for Chrome on Android and works live and on demand.