feat: Add option to use full window mode instead of using tech's fullscreen (#7218)

iPhone's native fullscreen isn't always desirable as you can't overlay controls or anything else. Adds an option to prefer "full window" mode over the video el's fullscreen.

If the preferFullWindow option is set to true, on a browser that does not support the proper fullscreen API but does support fullscreen on the video element (i.e. iPhone), then requestFullscreenHelper_() should call enterFullWindow() instead of fullscreen on the tech.

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`

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();

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);