@gkatsev fixed nativeControlsForTouch handling. Defaults to native controls on iphone and native android browsers.. closes #2499

CHANGELOG.md

@@ -106,6 +106,7 @@ CHANGELOG
 * @nickygerritsen fixed texttrack handling in IE10 ([view](https://github.com/videojs/video.js/pull/2481))
 * @gkatsev deep clone el for iOS to preserve tracks ([view](https://github.com/videojs/video.js/pull/2494))
 * @forbesjo switched automated testing to BrowserStack ([view](https://github.com/videojs/video.js/pull/2492))
+* @gkatsev fixed nativeControlsForTouch handling. Defaults to native controls on iphone and native android browsers. ([view](https://github.com/videojs/video.js/pull/2499))
 
 --------------------
 

src/css/components/_control-bar.scss

@@ -29,9 +29,9 @@
   @include transition($trans);
 }
 
-.video-js.vjs-controls-disabled .vjs-control-bar,
-.video-js.vjs-using-native-controls .vjs-control-bar,
-.video-js.vjs-error .vjs-control-bar {
+.video-js.video-js.video-js.vjs-controls-disabled .vjs-control-bar,
+.video-js.video-js.video-js.vjs-using-native-controls .vjs-control-bar,
+.video-js.video-js.video-js.vjs-error .vjs-control-bar {
   display: none;
 }
 

src/js/player.js

@@ -501,6 +501,7 @@ class Player extends Component {
 
     // Grab tech-specific options from player options and add source and parent element to use.
     var techOptions = assign({
+      'nativeControlsForTouch': this.options_.nativeControlsForTouch,
       'source': source,
       'playerId': this.id(),
       'techId': `${this.id()}_${techName}_api`,
@@ -534,7 +535,6 @@ class Player extends Component {
     textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech);
 
     this.on(this.tech, 'ready', this.handleTechReady);
-    this.on(this.tech, 'usenativecontrols', this.handleTechUseNativeControls);
 
     // Listen to every HTML5 events and trigger them back on the player for the plugins
     this.on(this.tech, 'loadstart', this.handleTechLoadStart);
@@ -564,6 +564,8 @@ class Player extends Component {
     this.on(this.tech, 'texttrackchange', this.onTextTrackChange);
     this.on(this.tech, 'loadedmetadata', this.updateStyleEl_);
 
+    this.usingNativeControls(this.techGet('controls'));
+
     if (this.controls() && !this.usingNativeControls()) {
       this.addTechControlsListeners();
     }
@@ -665,16 +667,6 @@ class Player extends Component {
     }
   }
 
-  /**
-   * Fired when the native controls are used
-   *
-   * @private
-   * @method handleTechUseNativeControls
-   */
-  handleTechUseNativeControls() {
-    this.usingNativeControls(true);
-  }
-
   /**
    * Fired when the user agent begins looking for media data
    *
@@ -1947,6 +1939,7 @@ class Player extends Component {
       if (this.usingNativeControls_ !== bool) {
         this.usingNativeControls_ = bool;
         if (bool) {
+          this.removeTechControlsListeners();
           this.addClass('vjs-using-native-controls');
 
           /**
@@ -1959,6 +1952,7 @@ class Player extends Component {
             */
           this.trigger('usingnativecontrols');
         } else {
+          this.addTechControlsListeners();
           this.removeClass('vjs-using-native-controls');
 
           /**

src/js/tech/html5.js

@@ -76,8 +76,10 @@ class Html5 extends Tech {
     // Our goal should be to get the custom controls on mobile solid everywhere
     // so we can remove this all together. Right now this will block custom
     // controls on touch enabled laptops like the Chrome Pixel
-    if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true) {
-      this.trigger('usenativecontrols');
+    if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true ||
+        browser.IS_IPHONE ||
+        browser.IS_NATIVE_ANDROID) {
+      this.setControls(true);
     }
 
     this.triggerReady();

src/js/utils/browser.js

@@ -5,6 +5,8 @@ import document from 'global/document';
 import window from 'global/window';
 
 const USER_AGENT = window.navigator.userAgent;
+const webkitVersionMap = (/AppleWebKit\/([\d.]+)/i).exec(USER_AGENT);
+const appleWebkitVersion = webkitVersionMap ? parseFloat(webkitVersionMap.pop()) : null;
 
 /*
  * Device is an iPhone
@@ -48,6 +50,7 @@ export const ANDROID_VERSION = (function() {
 })();
 // Old Android is defined as Version older than 2.3, and requiring a webkit version of the android browser
 export const IS_OLD_ANDROID = IS_ANDROID && (/webkit/i).test(USER_AGENT) && ANDROID_VERSION < 2.3;
+export const IS_NATIVE_ANDROID = IS_ANDROID && ANDROID_VERSION < 5 && appleWebkitVersion < 537;
 
 export const IS_FIREFOX = (/Firefox/i).test(USER_AGENT);
 export const IS_CHROME = (/Chrome/i).test(USER_AGENT);

test/unit/tech/tech-faker.js

@@ -46,6 +46,7 @@ class TechFaker extends Tech {
   duration() { return {}; }
   networkState() { return 0; }
   readyState() { return 0; }
+  controls() { return false; }
 
   // Support everything except for "video/unsupported-format"
   static isSupported() { return true; }