fix: proxy ios webkit events into fullscreenchange (#3644)

iOS still doesn't have native fullscreen API access. The video element uses the old webkit fullscreen events `webkitbeginfullscreen` and `webkitendfullscreen`. This makes it so both of those trigger `fullscreenchange` on the player always as opposed to only when `requestFullscreen` was called on the player.

Author: gkatsev

src/js/tech/html5.js

@@ -133,6 +133,10 @@ class Html5 extends Tech {
       this.setControls(true);
     }
 
+    // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
+    // into a `fullscreenchange` event
+    this.proxyWebkitFullscreen_();
+
     this.triggerReady();
   }
 
@@ -445,6 +449,35 @@ class Html5 extends Tech {
     return this.el_.offsetHeight;
   }
 
+  /**
+   * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
+   * `fullscreenchange` event
+   *
+   * @private
+   * @method proxyWebkitFullscreen_
+   */
+  proxyWebkitFullscreen_() {
+    if (!('webkitDisplayingFullscreen' in this.el_)) {
+      return;
+    }
+
+    const endFn = function() {
+      this.trigger('fullscreenchange', { isFullscreen: false });
+    };
+
+    const beginFn = function() {
+      this.one('webkitendfullscreen', endFn);
+
+      this.trigger('fullscreenchange', { isFullscreen: true });
+    };
+
+    this.on('webkitbeginfullscreen', beginFn);
+    this.on('dispose', () => {
+      this.off('webkitbeginfullscreen', beginFn);
+      this.off('webkitendfullscreen', endFn);
+    });
+  }
+
   /**
    * Get if there is fullscreen support
    *
@@ -468,16 +501,6 @@ class Html5 extends Tech {
   enterFullScreen() {
     const video = this.el_;
 
-    if ('webkitDisplayingFullscreen' in video) {
-      this.one('webkitbeginfullscreen', function() {
-        this.one('webkitendfullscreen', function() {
-          this.trigger('fullscreenchange', { isFullscreen: false });
-        });
-
-        this.trigger('fullscreenchange', { isFullscreen: true });
-      });
-    }
-
     if (video.paused && video.networkState <= video.HAVE_METADATA) {
       // attempt to prime the video element for programmatic access
       // this isn't necessary on the desktop but shouldn't hurt