Launch critical: Video playback very unreliable/not working across all mobile platforms

[Kevsy]

Summary

When attempting to play back a video, the video often does not play and the player reports an error, or the user is prompted to download, and the download results in an error.

System information

Please specify the Kolibri version you were using and your operating system!

• Version: vf 0.3.1 beta1
• Operating system: Ubuntu 1.04
• Browser: system browser, Chrome, Safari, opera Mini. Tested on LG, Samsung Galaxy S6, Sony Xperia Z1, Huawei and iPhone 5c

Traceback or relevant snippet from server.log or browser console

INSERT TRACEBACK, LOG MESSAGES ETC. HERE

How to reproduce

1. log in using a mobile device
2. Attempt to play a range of videos

Screenshots

To follow

Real-life consequences (anything community should be aware of, for instance how it affects your deployment)

Crucial for launch demo. Videos are highly erratic and mostly unplayable at the moment

[jamalex]

I was able to replicate in Safari on an iPhone 6 -- the loading bird pulses in the place where the video player should be, but no video loads.

On Android (Nexus 6 and Pixel) it works for me in both Chrome (default browser) and Opera Mini.

[christianmemije]

See comments left in #1046

[Kevsy]

Thanks Jamie - that's interesting because they are Google phones, whereas we are seeing the problem on vendors with their own Android OEM (which is typically a fork).Unfortunately Google brand hardware is very much the minority in DRC (and the other markets). Would you be able to test on any non-Google Android devices and see if you are getting the same problem we are seeing?

[jamalex]

Those are the phones I have with me here in my hotel room in Barcelona, but hopefully someone in the office can test further with others. I believe we've also already been testing with very old non-Google OEM Android tablets, without issue.

The iPhone issue is likely due to:
https://confluence.atlassian.com/confkb/unable-to-play-embedded-mp4-videos-on-ipad-or-iphone-in-confluence-305037325.html (also see the link @christianmemije posted). Not much we can do about this, short-term, so let's focus on Android.

[jamalex]

@Kevsy Ok, we've been looking into this today, and we've narrowed it down to the Nginx proxy configuration causing issues. Based on our tests, accessing our demo site directly (bypassing nginx) works on iPhone and older Android phones: http://tinyurl.com/instantschools

I'll play with the nginx config tomorrow. Could you have them test with that link in the meantime? Thanks!!!

[Kevsy]

Cheers all, thanks for the rapid investigations :) @jamalex ok I think there may be two distinct issues:

(1) Swahili videos failing because they are not in the content dirs (this may relate to #5294 - see @julianharty comments there)

The Swahili channel still has mostly English and English videos. The only videos I can get to work in the Swahili channel are the ones where the channel and video title are in Swahili - the first basic maths channel is an example where it works (although note, some of the videos still have dialogue in English...)

Anything where the channel/title is in English returns a 404, even though the thumbnail is there.

At the moment Swahili is the initial channel shown, which means it has the videos most likely to be played (or attempted to be played)

(2) Certain French videos failing. This is far less common than Swahili - here is an example error when attempting playback:

Désolé, une erreur s'est produite. Veuillez essayer d'actualiser la page
Détails de l'erreur :

{ "request": 
{ "path": "/api/contentsummarylog/31/", 
"method": "PATCH", 
"entity": 
"{\"end_timestamp\":\"2017-03-30T10:10:28.547Z\",
\"progress\":null,\"time_spent\":0.447}", 
"headers": 
{ "X-CSRFToken": "7kNoQK7LusuV5UQAyMsC2qLBjKhVxikN", "Content-Type": "application/json", "Accept": "application/json, application/json;q=0.8, text/plain;q=0.5, */*;q=0.2" }, "canceled": false }, "url": "/api/contentsummarylog/31/", "raw": { "response": "{\"progress\":[\"Ce champ ne peut être nul.\"]}", "responseText": "{\"progress\":[\"Ce champ ne peut être nul.\"]}" }, "status": { "code": 400, "text": "Bad Request" }, "headers": { "Date": "Thu, 30 Mar 2017 10:10:30 GMT", "Allow": "GET, PUT, PATCH, DELETE, HEAD, OPTIONS", "Server": "nginx/1.4.6 (Ubuntu)", "X-Frame-Options": "SAMEORIGIN", "Vary": "Accept, Cookie", "Content-Type": "application/json", "Transfer-Encoding": "chunked", "Connection": "keep-alive" }, "entity": { "progress": [ "Ce champ ne peut être nul." ] } }

Here's another example showing how it displays in the browser:

I'll try the nginx conf tweaks for mp4 on my local build to see if that fixes this one.

[Kevsy]

Update: With nginx disabled the French channel is mostly working (bar the sporadic JSON errors above). Ideally we need nginx as iptables portforwarding is not very resilient, and also nginx gives us better logs. So any help with the configuration much appreciated.

[jamalex]

(1) Hmm, strange. I'm assuming this is local. Have you downloaded the updated channel recently?

(2) This seems unrelated to content, and will hopefully be fixed by #1170

[jamalex]

In terms of your local nginx config, did you try adding proxy_http_version 1.1; into your conf file? That's what I did on our production servers.

[Kevsy]

proxy_http_version 1.1; Yes, that's in sites-enabled/kolibri.conf in a server block (attached, along with nginx.conf)

nginx_conf.zip

[Kevsy]

Got it: nginx conf files don't allow any shell/environment variables, meaning the /home/{user}/ path has to be entered longhand (so neither ~ nor $HOME are supported).

[benjaoming]

@Kevsy - yup, we solved something like that by including the user's configuration files in ka-lite-raspberry-pi:'s system-wide nginx configuration

https://github.com/learningequality/ka-lite-installers/blob/master/debian/debian/kalite.conf#L21