Browse Source

Update fullscreen.js

add Fullscreen support for IE and fix fullscreen event bug for Firefox
A-Circle Zhang 7 years ago
parent
commit
001b61da6e
1 changed files with 37 additions and 4 deletions
  1. 37 4
      src/js/fullscreen.js

+ 37 - 4
src/js/fullscreen.js

@@ -22,15 +22,33 @@ class FullScreen {
                 this.player.events.trigger('fullscreen_cancel');
                 this.player.events.trigger('fullscreen_cancel');
             }
             }
         };
         };
-        this.player.container.addEventListener('fullscreenchange', fullscreenchange);
-        this.player.container.addEventListener('mozfullscreenchange', fullscreenchange);
-        this.player.container.addEventListener('webkitfullscreenchange', fullscreenchange);
+        const docfullscreenchange = () => {
+            let fullEle = document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+            if(fullEle && fullEle !== this.player.container){
+                return;
+            }
+            if(fullEle){
+                this.player.events.trigger('fullscreen');
+            } else {
+                utils.setScrollPosition(this.lastScrollPosition);
+                this.player.events.trigger('fullscreen_cancel');
+            }
+        }
+        if(/Firefox/.test(navigator.userAgent)){
+            document.addEventListener('mozfullscreenchange', docfullscreenchange);
+            document.addEventListener('fullscreenchange', docfullscreenchange);
+        } else {
+            this.player.container.addEventListener('fullscreenchange', fullscreenchange);
+            this.player.container.addEventListener('webkitfullscreenchange', fullscreenchange);
+            document.addEventListener('msfullscreenchange', docfullscreenchange);
+            document.addEventListener('MSFullscreenChange', docfullscreenchange);
+        }
     }
     }
 
 
     isFullScreen (type = 'browser') {
     isFullScreen (type = 'browser') {
         switch (type) {
         switch (type) {
         case 'browser':
         case 'browser':
-            return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
+            return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
         case 'web':
         case 'web':
             return this.player.container.classList.contains('dplayer-fulled');
             return this.player.container.classList.contains('dplayer-fulled');
         }
         }
@@ -57,6 +75,12 @@ class FullScreen {
             else if (this.player.video.webkitEnterFullscreen) {   // Safari for iOS
             else if (this.player.video.webkitEnterFullscreen) {   // Safari for iOS
                 this.player.video.webkitEnterFullscreen();
                 this.player.video.webkitEnterFullscreen();
             }
             }
+            else if (this.player.video.webkitEnterFullScreen) {
+                this.player.video.webkitEnterFullScreen();
+            }
+            else if (this.player.container.msRequestFullscreen) {
+                this.player.container.msRequestFullscreen();
+            }
             break;
             break;
         case 'web':
         case 'web':
             this.player.container.classList.add('dplayer-fulled');
             this.player.container.classList.add('dplayer-fulled');
@@ -82,6 +106,15 @@ class FullScreen {
             else if (document.webkitCancelFullScreen) {
             else if (document.webkitCancelFullScreen) {
                 document.webkitCancelFullScreen();
                 document.webkitCancelFullScreen();
             }
             }
+            else if (document.webkitCancelFullscreen) {
+                document.webkitCancelFullscreen();
+            }
+            else if (document.msCancelFullScreen) {
+                document.msCancelFullScreen();
+            }
+            else if (document.msExitFullscreen){
+                document.msExitFullscreen();
+            }
             break;
             break;
         case 'web':
         case 'web':
             this.player.container.classList.remove('dplayer-fulled');
             this.player.container.classList.remove('dplayer-fulled');