improve VideoPlayer fullscreen for 2d-tasks/issues/1562 (#4845)

* fix api doc (#4824) * fix ArmatureDisplay property error. * modify the translation * improve VideoPlayer fullscreen for 2d-tasks/issues/1562 * refine tips * refine code
cocos · Jul 10, 2019 · 576560a · 576560a
1 parent e91f2ad
commit 576560a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 27 deletions.
diff --git a/cocos2d/core/collider/CCIntersection.js b/cocos2d/core/collider/CCIntersection.js
@@ -324,7 +324,7 @@ Intersection.pointInPolygon = pointInPolygon;
  * @param {Vec2} start - The start point of line
  * @param {Vec2} end - The end point of line
  * @param {boolean} isSegment - whether this line is a segment
- * @return {boolean}
+ * @return {number}
  */
 function pointLineDistance(point, start, end, isSegment) {
     var dx = end.x - start.x;

diff --git a/cocos2d/core/platform/CCScreen.js b/cocos2d/core/platform/CCScreen.js
@@ -32,6 +32,8 @@
  */
 cc.screen = /** @lends cc.screen# */{
     _supportsFullScreen: false,
+    _onfullscreenchange: null,
+    _onfullscreenerror: null,
     // the pre fullscreenchange function
     _preOnFullScreenChange: null,
     _preOnFullScreenError: null,
@@ -127,8 +129,9 @@ cc.screen = /** @lends cc.screen# */{
      * @method requestFullScreen
      * @param {Element} element
      * @param {Function} onFullScreenChange
+     * @param {Function} onFullScreenError
      */
-    requestFullScreen: function (element, onFullScreenChange) {
+    requestFullScreen: function (element, onFullScreenChange, onFullScreenError) {
         if (element && element.tagName.toLowerCase() === "video") {
             if (cc.sys.os === cc.sys.OS_IOS && cc.sys.isBrowser && element.readyState > 0) {
                 element.webkitEnterFullscreen && element.webkitEnterFullscreen();
@@ -146,13 +149,21 @@ cc.screen = /** @lends cc.screen# */{
         element = element || document.documentElement;
 
         if (onFullScreenChange) {
-            var eventName = this._fn.fullscreenchange;
-            if (this._preOnFullScreenChange) {
-                document.removeEventListener(eventName, this._preOnFullScreenChange);
+            let eventName = this._fn.fullscreenchange;
+            if (this._onfullscreenchange) {
+                document.removeEventListener(eventName, this._onfullscreenchange);
             }
-            this._preOnFullScreenChange = onFullScreenChange;
+            this._onfullscreenchange = onFullScreenChange;
             document.addEventListener(eventName, onFullScreenChange, false);
         }
+        if (onFullScreenError) {
+            let eventName = this._fn.fullscreenerror;
+            if (this._onfullscreenerror) {
+                document.removeEventListener(eventName, this._onfullscreenerror);
+            }
+            this._onfullscreenerror = onFullScreenError;
+            document.addEventListener(eventName, onFullScreenError, { once: true });
+        }
 
         element[this._fn.requestFullscreen]();
     },

diff --git a/cocos2d/videoplayer/CCVideoPlayer.js b/cocos2d/videoplayer/CCVideoPlayer.js
@@ -233,6 +233,8 @@ let VideoPlayer = cc.Class({
          * !#en Whether keep the aspect ration of the original video.
          * !#zh 是否保持视频原来的宽高比
          * @property {Boolean} keepAspectRatio
+         * @type {Boolean}
+         * @default true
          */
         keepAspectRatio: {
             tooltip: CC_DEV && 'i18n:COMPONENT.videoplayer.keepAspectRatio',
@@ -247,14 +249,24 @@ let VideoPlayer = cc.Class({
          * !#en Whether play video in fullscreen mode.
          * !#zh 是否全屏播放视频
          * @property {Boolean} isFullscreen
+         * @type {Boolean}
+         * @default false
          */
-        isFullscreen: {
-            tooltip: CC_DEV && 'i18n:COMPONENT.videoplayer.isFullscreen',
+        _isFullscreen: {
             default: false,
-            type: cc.Boolean,
-            notify: function () {
-                this._impl.setFullScreenEnabled(this.isFullscreen);
-            }
+            formerlySerializedAs: '_N$isFullscreen',
+        },
+        isFullscreen: {
+            get () {
+                this._isFullscreen = this._impl.isFullScreenEnabled();
+                return this._isFullscreen;
+            },
+            set (enable) {
+                this._isFullscreen = enable;
+                this._impl.setFullScreenEnabled(enable);
+            },
+            animatable: false,
+            tooltip: CC_DEV && 'i18n:COMPONENT.videoplayer.isFullscreen'
         },
 
         /**

diff --git a/cocos2d/videoplayer/video-player-impl.js b/cocos2d/videoplayer/video-player-impl.js
@@ -48,6 +48,7 @@ let VideoPlayerImpl = cc.Class({
         this._video = null;
         this._url = '';
 
+        this._waitingFullscreen = false;
         this._fullScreenEnabled = false;
 
         this._loadedmeta = false;
@@ -76,11 +77,9 @@ let VideoPlayerImpl = cc.Class({
         let cbs = this.__eventListeners;
         cbs.loadedmetadata = function () {
             self._loadedmeta = true;
-            if (self._fullScreenEnabled) {
-                cc.screen.requestFullScreen(video);
-            }
-            else if (cc.screen.fullScreen()) {
-                cc.screen.exitFullScreen(video);
+            if (self._waitingFullscreen) {
+                self._waitingFullscreen = false;
+                self._toggleFullscreen(true);
             }
             self._dispatchEvent(VideoPlayerImpl.EventType.META_LOADED);
         };
@@ -355,20 +354,41 @@ let VideoPlayerImpl = cc.Class({
         return true;
     },
 
-    setFullScreenEnabled: function (enable) {
-        let video = this._video;
+    _toggleFullscreen: function (enable) {
+        let self = this, video = this._video;
         if (!video) {
             return;
         }
-        this._fullScreenEnabled = enable;
-        if (enable) {
-            cc.screen.requestFullScreen(video);
+
+        // Monitor video entry and exit full-screen events
+        function handleFullscreenChange (event) {
+            let fullscreenElement = sys.browserType === sys.BROWSER_TYPE_IE ? document.msFullscreenElement : document.fullscreenElement;
+            self._fullScreenEnabled =  (fullscreenElement === video);
+        }
+        function handleFullScreenError (event) {
+            self._fullScreenEnabled = false;
         }
-        else if (cc.screen.fullScreen()) {
+
+        if (enable) {
+            if (sys.browserType === sys.BROWSER_TYPE_IE) {
+                // fix IE full screen content is not centered
+                video.style['transform'] = '';
+            }
+            cc.screen.requestFullScreen(video, handleFullscreenChange, handleFullScreenError);
+        } else if (cc.screen.fullScreen()) {
             cc.screen.exitFullScreen(video);
         }
     },
 
+    setFullScreenEnabled: function (enable) {
+        if (!this._loadedmeta && enablezhi) {
+            this._waitingFullscreen = true;
+        }
+        else {
+            this._toggleFullscreen(enable);
+        }
+    },
+
     isFullScreenEnabled: function () {
         return this._fullScreenEnabled;
     },
@@ -420,7 +440,7 @@ let VideoPlayerImpl = cc.Class({
     },
 
     updateMatrix (node) {
-        if (!this._video || !this._visible) return;
+        if (!this._video || !this._visible || this._fullScreenEnabled) return;
 
         node.getWorldMatrix(_mat4_temp);
 

diff --git a/extensions/dragonbones/ArmatureDisplay.js b/extensions/dragonbones/ArmatureDisplay.js
@@ -882,10 +882,10 @@ let ArmatureDisplay = cc.Class({
 
     /**
      * !#en
-     * Add event listener for the DragonBones Event, the same to addEventListener.
+     * Add DragonBones one-time event listener, the callback will remove itself after the first time it is triggered.
      * !#zh
-     * 添加 DragonBones 一次性事件监听器，回调会在第一时间被触发后删除自身。。
-     * @method on
+     * 添加 DragonBones 一次性事件监听器，回调会在第一时间被触发后删除自身。
+     * @method once
      * @param {String} type - A string representing the event type to listen for.
      * @param {Function} listener - The callback that will be invoked when the event is dispatched.
      * @param {Event} listener.event event