diff --git a/docs/guides/options.md b/docs/guides/options.md index 1a5832d7a..f5ba79908 100644 --- a/docs/guides/options.md +++ b/docs/guides/options.md @@ -38,6 +38,7 @@ * [options](#options) * [playbackRates](#playbackrates) * [plugins](#plugins) + * [preferFullWindow](#preferfullwindow) * [responsive](#responsive) * [sources](#sources) * [suppressNotSupportedError](#suppressnotsupportederror) @@ -374,6 +375,12 @@ Although, since the `plugins` option is an object, the order of initialization i See [the plugins guide][plugins] for more information on Video.js plugins. +### `preferFullWindow` + +> Type: `boolean`, Defaut: `false` + +Setting this to `true` will change fullscreen behaviour on devices which do not support the HTML5 fullscreen API but do support fullscreen on the video element, i.e. iPhone. Instead of making the video fullscreen, the player will be stretched to fill the browser window. + ### `responsive` > Type: `boolean`, Default: `false` diff --git a/src/js/player.js b/src/js/player.js index 0376e99d3..f60521fe7 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -2880,7 +2880,7 @@ class Player extends Component { } return promise; - } else if (this.tech_.supportsFullScreen()) { + } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) { // we can't take the video.js controls fullscreen but we can go fullscreen // with native controls this.techCall_('enterFullScreen'); @@ -2940,7 +2940,7 @@ class Player extends Component { } return promise; - } else if (this.tech_.supportsFullScreen()) { + } else if (this.tech_.supportsFullScreen() && !this.options_.preferFullWindow === true) { this.techCall_('exitFullScreen'); } else { this.exitFullWindow(); diff --git a/test/unit/player-fullscreen.test.js b/test/unit/player-fullscreen.test.js index 0421834d7..27a2925cc 100644 --- a/test/unit/player-fullscreen.test.js +++ b/test/unit/player-fullscreen.test.js @@ -208,6 +208,26 @@ QUnit.test('fullscreenOptions from function args should override player options' player.dispose(); }); +QUnit.test('full window can be preferred to fullscreen tech', function(assert) { + + const player = FullscreenTestHelpers.makePlayer(false, { + preferFullWindow: true + }); + + player.fsApi_ = {}; + player.tech_.supportsFullScreen = () => true; + + player.requestFullscreen(); + + assert.strictEqual(player.isFullscreen(), true, 'player considered fullscreen'); + assert.strictEqual(player.isFullWindow, true, 'player is full window'); + + player.exitFullscreen(); + assert.strictEqual(player.isFullWindow, false, 'full window is exited'); + + player.dispose(); +}); + QUnit.test('fullwindow mode should exit when ESC event triggered', function(assert) { const player = FullscreenTestHelpers.makePlayer(true);