learningequality / ka-lite

KA Lite: lightweight web server for serving core Khan Academy content (videos and exercises) without needing internet connectivity
https://learningequality.org/ka-lite/
Other
456 stars 306 forks source link

Videos not playing in Firefox on Android #5492

Open radinamatic opened 6 years ago

radinamatic commented 6 years ago

Summary

Confirming the error reported on our community forums. Videos not playing in Firefox (and not even in Chrome on the oldest device with Android 4.2.2), displaying just black square instead of the video player.

System information

  1. Tablet Huawei T1-A21w; Android version 4.4.4 (in FF not playing, in Chrome plays OK)
  2. Moto G Play phone; Android version 6.0.1 (in FF not playing, in Chrome plays OK)
  3. Samsung GT-S7580; Android version 4.2.2 (not playing in either FF & Chrome, plays OK in native browser, go figure... :unamused:)

    • KA Lite Version: 0.16.9 (demo server)
    • Browser: latest FF & Chrome from the Playstore

Real-life consequences

Already reported by several users.

jmerrow commented 6 years ago

Using Boost Mobile Moova Shuffle running Android 5.1 connecting to KA Lite demo Chrome 56.0.2924.87 - video doesn't play, just get a black square Latest version of Firefox (installed today 27/7/17 sorry don't have version) - video plays

Note: I'm testing using the live KA Lite demo, which I've just found out is 0.16.9

polilinux-fsrechia commented 6 years ago

I've done some testing using an old tablet from HP, called TouchPad. It used to run the original Linux-based OS from HP called WebOS, but that was replaced by a CyanogenMod version of Android.

Tablet information:

Brand: HP
Model:  TouchPad (https://en.wikipedia.org/wiki/HP_TouchPad)
Android Version: 4.4.4
CyanogenMod Version: 11-20151116-SNAPSHOT-jcsullins-tenderloin
Kernel Version: 3.0.101-cyanogenmod-08993-g08b8f9d

Browser tests:

Chrome          59.0.3071.125       Video does not play
Firefox         54.0.1          Video does not play
Opera           42.7.2246.114996    Video works
Native browser      ??          Video works

All video tests were done trying to play the first math video, in which Sal teaches people how to count:

Please let me know if there is anything I can do to help find the root cause of the problem. I can get more logs, or even try some debugging procedures if you need.

best wishes, Felipe

polilinux-fsrechia commented 6 years ago

Hello,

I have some news. I have managed to connect the desktop google-chrome developer tools via USB to the Android Chrome browser, and I got some interesting results.

At first I managed to reproduce the issue, and noticed that Chrome was showing only a black square and not playing the video. That behavior was reproduced several times by reloading the page.

Then I got a pop-up from DevTools telling me to disable the "Data Saver" feature for proper debugging. I disabled Data Saver and reloaded the page: the result was that the video player showed up fully functional.

I am attaching a screenshot of DevTools and the console log for that situation (video working in Google-chrome Android version 59.0.3071.125):

captura de tela_2017-08-08_14-07-17

console_log_ka_lite_video_google-chrome.log.zip

The following message from the log looks intriguing... perhaps it could be related to the problem?

log.js:1 VIDEOJS: WARN: Calling addRemoteTextTrack without explicitly setting the "manualCleanup" parameter to `true` is deprecated and default to `false` in future version of video.js

Turning off the data saver might be a reasonable workaround to make the video work in Google-chrome Android. Hopefully this works in other situations, and not just for me...

best wishes,

Felipe

radinamatic commented 6 years ago

Very interesting find @polilinux-fsrechia :+1:

@mrpau-dev @mrpau-eduard Any ideas how we could disable the "Data Saver" feature?

polilinux-fsrechia commented 6 years ago

@radinamatic the data saver feature looks like a browser-enabled thing... I was wondering if the server can enforce the client to not use it. Then I stumbled upon this stackoverflow thread which seems to apply to PHP/Apache:

https://stackoverflow.com/questions/31314119/disable-chrome-s-data-saver-optimization

Perhaps it is possible to have KA Lite (or a proxy in between KA Lite and the client) to set this no-transform HTTP header from the server side?

jmerrow commented 6 years ago

Videos playing on Android 5.1 with firefox (but not chrome) using latest version of ka-lite. This is good enough for us. Thanks everyone for all the help.

Best Josh

mrpau-eduard commented 6 years ago

@mrpau-eugene any thoughts of this issue? Can you take a look on this issue since you have some android experience.

mrpau-eugene commented 6 years ago

@mrpau-eduard @radinamatic

Quoting from: https://developer.chrome.com/multidevice/data-compression

Can I detect if the user has Data Compression Proxy turned on?

Yes, kind of. As of Chrome 49 (Beta in Feb 2nd 2016, Estimated stable date in late March) when the user has enabled the Data Saver feature in Chrome, Chrome will add a save-data HTTP Header with the value 'on' to each HTTP Request. The HTTP Header will not be present when the feature is turned off. Use this as a signal of intent from the user that they are conscious of the amount of data that they are using and not that their connection is going through the Data Compression Proxy. For instance, the HTTP Header will be set when the user visits a site over HTTPS even though secure connections are not passed through the Data Compression Proxy.

I don't think we can disable the "Data Saver" (but will still research if we can disable it). Or maybewe can just add some message to tell the user to disable the "Data Saver" feature on their browser.