comparison johndyer-mediaelement-13fa20a/src/js/mep-feature-fullscreen.js @ 0:032bc65ebafc

added core components
author George Fazekas <gyorgy.fazekas@eecs.qmul.ac.uk>
date Wed, 06 Mar 2013 15:45:48 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:032bc65ebafc
1 (function($) {
2 mejs.MediaElementDefaults.forcePluginFullScreen = false;
3
4 MediaElementPlayer.prototype.isFullScreen = false;
5 MediaElementPlayer.prototype.buildfullscreen = function(player, controls, layers, media) {
6
7 if (!player.isVideo)
8 return;
9
10 // native events
11 if (mejs.MediaFeatures.hasNativeFullScreen) {
12 player.container.bind('webkitfullscreenchange', function(e) {
13
14 if (document.webkitIsFullScreen) {
15 // reset the controls once we are fully in full screen
16 player.setControlsSize();
17 } else {
18 // when a user presses ESC
19 // make sure to put the player back into place
20 player.exitFullScreen();
21 }
22 });
23 }
24
25 var
26 normalHeight = 0,
27 normalWidth = 0,
28 container = player.container,
29 docElement = document.documentElement,
30 docStyleOverflow,
31 parentWindow = window.parent,
32 parentiframes,
33 iframe,
34 fullscreenBtn =
35 $('<div class="mejs-button mejs-fullscreen-button"><button type="button"></button></div>')
36 .appendTo(controls)
37 .click(function() {
38 var isFullScreen = (mejs.MediaFeatures.hasNativeFullScreen) ?
39 document.webkitIsFullScreen :
40 player.isFullScreen;
41
42 if (isFullScreen) {
43 player.exitFullScreen();
44 } else {
45 player.enterFullScreen();
46 }
47 });
48
49 player.enterFullScreen = function() {
50
51 // firefox can't adjust plugin sizes without resetting :(
52 if (player.pluginType !== 'native' && (mejs.MediaFeatures.isFirefox || player.options.forcePluginFullScreen)) {
53 media.setFullscreen(true);
54 //player.isFullScreen = true;
55 return;
56 }
57
58 // attempt to set fullscreen
59 if (mejs.MediaFeatures.hasNativeFullScreen) {
60 player.container[0].webkitRequestFullScreen();
61 }
62
63 // store overflow
64 docStyleOverflow = docElement.style.overflow;
65 // set it to not show scroll bars so 100% will work
66 docElement.style.overflow = 'hidden';
67
68 // store
69 normalHeight = player.container.height();
70 normalWidth = player.container.width();
71
72 // make full size
73 container
74 .addClass('mejs-container-fullscreen')
75 .width('100%')
76 .height('100%')
77 .css('z-index', 1000);
78 //.css({position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, overflow: 'hidden', width: '100%', height: '100%', 'z-index': 1000});
79
80 if (player.pluginType === 'native') {
81 player.$media
82 .width('100%')
83 .height('100%');
84 } else {
85 container.find('object embed')
86 .width('100%')
87 .height('100%');
88 player.media.setVideoSize($(window).width(),$(window).height());
89 }
90
91 layers.children('div')
92 .width('100%')
93 .height('100%');
94
95 fullscreenBtn
96 .removeClass('mejs-fullscreen')
97 .addClass('mejs-unfullscreen');
98
99 player.setControlsSize();
100 player.isFullScreen = true;
101 };
102 player.exitFullScreen = function() {
103
104 // firefox can't adjust plugins
105 if (player.pluginType !== 'native' && mejs.MediaFeatures.isFirefox) {
106 media.setFullscreen(false);
107 //player.isFullScreen = false;
108 return;
109 }
110
111 // come outo of native fullscreen
112 if (mejs.MediaFeatures.hasNativeFullScreen && document.webkitIsFullScreen) {
113 document.webkitCancelFullScreen();
114 }
115
116 // restore scroll bars to document
117 docElement.style.overflow = docStyleOverflow;
118
119 container
120 .removeClass('mejs-container-fullscreen')
121 .width(normalWidth)
122 .height(normalHeight)
123 .css('z-index', 1);
124 //.css({position: '', left: '', top: '', right: '', bottom: '', overflow: 'inherit', width: normalWidth + 'px', height: normalHeight + 'px', 'z-index': 1});
125
126 if (player.pluginType === 'native') {
127 player.$media
128 .width(normalWidth)
129 .height(normalHeight);
130 } else {
131 container.find('object embed')
132 .width(normalWidth)
133 .height(normalHeight);
134
135 player.media.setVideoSize(normalWidth, normalHeight);
136 }
137
138 layers.children('div')
139 .width(normalWidth)
140 .height(normalHeight);
141
142 fullscreenBtn
143 .removeClass('mejs-unfullscreen')
144 .addClass('mejs-fullscreen');
145
146 player.setControlsSize();
147 player.isFullScreen = false;
148 };
149
150 $(window).bind('resize',function (e) {
151 player.setControlsSize();
152 });
153
154 $(document).bind('keydown',function (e) {
155 if (player.isFullScreen && e.keyCode == 27) {
156 player.exitFullScreen();
157 }
158 });
159
160 }
161
162 })(mejs.$);