Mercurial > hg > env-test-daniele
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.$); |