Mobile support issues and some solutions

[sangatpedas]

Hi guys,

I've been focussing on mobile support for videojs on the most popular Android browsers and find the following issues and some solutions. Mainly this is about support for the videojs controls.

First, in Chrome on Android all seems to work as expected.

The most problems occur with the default Android browser on Jelly Bean, ICS seems to be ok. Basically in the current version the controls of the standard browser in Jelly Bean don't work at all. The reason for this is that Browser generates multiple clicks. So for instance when the play button is clicked it calls the process twice, resulting in a play request followed immediately by a pause request, resulting in nothing really happening. The same goes for all other buttons in the control bar.

I'm sure my solutions won't meet the required quality of the project but I give them anyway so they can be used as temporary work-around by others. This is done by editing the dev version.

First I've defined more booleans so I better know what browser I deal with:

vjs.IS_FIREFOX = (/Firefox/i).test(vjs.USER_AGENT);
vjs.IS_CHROME = (/Chrome/i).test(vjs.USER_AGENT);
vjs.IS_OPERA = ((/Opera/i).test(vjs.USER_AGENT) || (/OPR/i).test(vjs.USER_AGENT));
if (!vjs.IS_FIREFOX && !vjs.IS_CHROME && !vjs.IS_OPERA) //the safari string is also used in other browsers
vjs.IS_SAFARI = (/Safari/i).test(vjs.USER_AGENT);

Next, I define an execution time out based on browser/platform:

var execTimeout=0;
if (vjs.TOUCH_ENABLED && vjs.IS_ANDROID && (vjs.IS_SAFARI || vjs.IS_FIREFOX))
var execTimeout=500; //this is the time in ms that allows for a next execution
var isExecuted=false;

Now basically all onclick function are rewritten like this:

// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.onClick = function(event){
   if(isExecuted==false || isExecuted==null) {
    isExecuted=true;
    if (this.player_.paused())  {
        this.player_.play();
    } else {
        this.player_.pause();
    }
    setTimeout(function() {isExecuted=false; }, execTimeout);
  }
};

On the fullscreen toggle button more changes are required. Since Safari uses native controls in fullscreen mode, any request from the toggle button is always a request for fullscreen. And since returning from fullscreen with native controls doesn't change the values of the button or the var isFullScreen, no need to change them in the first place.

vjs.FullscreenToggle.prototype.onClick = function(){
  if(isExecuted==false || isExecuted==null) {
    isExecuted=true;
    if (this.player_.isFullScreen==null) this.player_.isFullScreen=false;
    if ((vjs.TOUCH_ENABLED && vjs.IS_ANDROID && vjs.IS_SAFARI) || !this.player_.isFullScreen) {
        this.player_.play();
        this.player_.requestFullScreen();
    }
    else if (!this.player_.isFullScreen) {
        this.player_.requestFullScreen();
        this.el_.children[0].children[0].innerHTML = 'Non-Fullscreen'; // change the button text to "Non-Fullscreen"        
    } else {
        this.player_.cancelFullScreen();
        this.el_.children[0].children[0].innerHTML = 'Fullscreen'; // change the button to "Fullscreen"
    }
    setTimeout(function() {isExecuted=false; }, execTimeout);
  }
};

vjs.MuteToggle.prototype.onClick = function(){
    var _this = this;
    if(isExecuted==false || isExecuted==null) {
        isExecuted=true;
        _this.player_.muted( _this.player_.muted() ? false : true ); 
    }
    setTimeout(function() {isExecuted=false; }, execTimeout);
};

As for the volume slider, I don't see much use for it unless one is a midget with extremely small fingers.

Then there's a problem (in my opinion) once a player is paused. Most mobile browser show a play button in the middle but since vjs.MediaTechController.prototype.onTap only triggers user activity. Since Chrome and Opera show a big native play button I made the following changes:

vjs.MediaTechController.prototype.onTap = function(){
  this.player().userActive(!this.player().userActive());
     if ((this.player().paused()) && (vjs.IS_CHROME || vjs.IS_OPERA))
      this.player().play() ;
};

After having done these changes the following issues remain for Android:

Firefox:
fullscreen doesn't work, remote debugging shows the fullscreen request is ignored due to too many iterations. This corresponds with a test I did with an external button that requests a full change, which works.

Returning from fullscreen changes zoom mode, player is slightly bigger as if double clicked.

Safari (so the official Safari release on Android)
Any fullscreen requests is ignored and stops the video entirely from playing

Opera
First play always switches to fullscreen
returning from fullscreen the native controls show again, even the boolean is set to false.

Thanks for all the work you guys put in and I hope this helps a bit and obviously I hope you guys can help with some of the remaining issues.

Remco

[mmcc]

Thank you for the detailed report! We think we've got a good idea where this is happening, but we'll need to do more testing to confirm. Could you tell us specifically what device / OS version you're using so we can try to replicate as closely as possible? Also, I was under the impression that the Android browser was removed entirely in 4.3?

I ran these tests on a Samsung Galaxy S4 running Android 4.3. Keep in mind I'm not a daily Android user, so please forgive any Android n00bery on my part :)

• Firefox: The customControlsOnMobile option seems to get ignored, and there isn't a fullscreen option available at all in the controls. Do you have a demo on hand with either of these things working (that displays the issue you reported)? I was using the Firefox stable version from Play, not the beta.
• Safari: AFAIK there was never an official Safari release for Android. Are you referring to "Safari Browser" app by a user named GALAXYS9? Either way, it's hard to say what's going on with fullscreen in the app, but considering the somewhat questionable legitimacy of the app (at least in terms of naming) we're not going to dedicate too much time to looking into it.
• Opera: The native player takes over much like we see on Android and Windows Mobile phones, so there's not much we can do there.

[sangatpedas]

Hi Matthew,

I haven't tested with 4.3 yet, I'm actually waiting for my Nexus 5 with 4.4. The tests I did so far were on a Sony Xperia with Android 4.1.2 and a Sony Tablet S with Android 4.0.x. I totally get that you guys focus on supporting the latest version and don't want to waste time with the bugs and problems of older version. However, I'm planning to use videojs in production in a country where they still sell Android 4.0 handsets and in general I think it's vital for a platform to deliver cross-browser compatibility.

I can easily provide you with a demo, but I'm pretty sure that the behaviour on 4.3 will be different on 4.1 (the platform I tested), the same as behaviour on 4.0 was different from 4.1.

Anyway, the problem of multiple clicks happening was in Browser on Android 4.1.2.

The summary of other problems across different browser also is based on tests on Android 4.1.2.

Next week I plan to do all tests again on Kit Kat and will share the results. For firefox, yeah I guess results from version 4.1 are less interesting for your developments.

As for Safari, I start to wonder now, if you search in Google for "safari browser android app" you can see it was in the playstore, but now has been removed so I guess it was a fake, my bad.

Anyway, I will do a lot more research/testing on mobile so I just share and hopefully it helps.

[heff]

Very helpful, thanks!

[sangatpedas]

Btw, I just checked and according to the device emulator in the ADT, the default browser is still included in both Android 4.3 and 4.4. However, I guess manufacturers can and do decide to feature Chrome as the main browser.

[gkatsev]

Nexus devices that began with the original Nexus 7 don't ship with any browser but Chrome. However, webviews on these devices are based on the "Native Android Browser". Starting with Android kitkat (4.4), webviews are based on chrome/chromium 18 (unfortunately, only 18, still better than nothing) and a lot of manufacturers are now starting to base their browsers based on chrome 18 as well. For example, the Samsung GS4's browser is based on chrome 18. Older samsung devices and other devices that have custom skins (i.e., non-nexus) probably have a custom browser based on the 'native android browser'.

Also, I'm not certain whether this is a related issue, but in #992 I fixed some problems with touch events and listening to those. It may or may not address the issues you were seeing, but worth taking a look.

[sangatpedas]

Btw, here's a nice statistic on Android versions being used at the moment: http://images0.tcdn.nl/digitaal/article22270727.ece/BINARY/q/Google+Android+percentages.jpg

Seems that Android 4.1 still represent1 >36% of all devices, which is quite a big chunk.

[mmcc]

Thanks for all of the feedback, @sangatpedas, this has been really helpful (that chart is great). We absolutely agree on the importance of backwards compatibility within reason, and the versions of Android we're talking about definitely fall in that range.

The PR @gkatsev mentioned has been merged into master, so would you mind testing against a fresh build and letting us know if that helped?

[sangatpedas]

Hi @mmcc, I'd be happy to help you out here but I never made a fresh build myself yet. I kinda understand what's needed and generally how it works but maybe you can fill in the gaps for me a bit to make sure?

[sangatpedas]

I'm sorry but I'm kinda oldskool dev guy so I'm now trying to figure out github so my contributions can be more effective. So I've forked the project and will debug using the source-loader.js. I'm just wondering if there's a quick way to create a fresh dev version.

[sangatpedas]

Anyway, I made a test page using the source-loader.js and the js files in the folder src of the master branch. Please check if I'm using the right files. If so, the commits didn't solve the issue, in the default browser on Android one click still seems to generate two clicks resulting in nothing happening. This is the test page: http://video.sangatpedas.com/test-vjs-master

[xanatrobe]

Has there been any fix for this? I am using video.js in PhoneGap and it is causing all kinds of trouble with the play/pause issue.