diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss index 8cde2e1aef..dd0d2737f9 100644 --- a/src/css/components/_control-bar.scss +++ b/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; } diff --git a/src/js/player.js b/src/js/player.js index ee09372bfe..b8b2ee155d 100644 --- a/src/js/player.js +++ b/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'); /** diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 685c3b1af0..378381a2f7 100644 --- a/src/js/tech/html5.js +++ b/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(); diff --git a/src/js/utils/browser.js b/src/js/utils/browser.js index 90a6f7deb1..545776191c 100644 --- a/src/js/utils/browser.js +++ b/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); diff --git a/test/unit/tech/tech-faker.js b/test/unit/tech/tech-faker.js index 243c5a58d2..df1312c191 100644 --- a/test/unit/tech/tech-faker.js +++ b/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; }