(function($) { $.extend(mejs.MepDefaults, { usePluginFullScreen: true, newWindowCallback: function() { return '';}, fullscreenText: mejs.i18n.t('Fullscreen') }); $.extend(MediaElementPlayer.prototype, { isFullScreen: false, isNativeFullScreen: false, docStyleOverflow: null, isInIframe: false, buildfullscreen: function(player, controls, layers, media) { if (!player.isVideo) return; player.isInIframe = (window.location != window.parent.location); // native events if (mejs.MediaFeatures.hasTrueNativeFullScreen) { // chrome doesn't alays fire this in an iframe var func = function(e) { if (mejs.MediaFeatures.isFullScreen()) { player.isNativeFullScreen = true; // reset the controls once we are fully in full screen player.setControlsSize(); } else { player.isNativeFullScreen = false; // when a user presses ESC // make sure to put the player back into place player.exitFullScreen(); } }; if (mejs.MediaFeatures.hasMozNativeFullScreen) { player.globalBind(mejs.MediaFeatures.fullScreenEventName, func); } else { player.container.bind(mejs.MediaFeatures.fullScreenEventName, func); } } var t = this, normalHeight = 0, normalWidth = 0, container = player.container, fullscreenBtn = $('
') .appendTo(controls); if (t.media.pluginType === 'native' || (!t.options.usePluginFullScreen && !mejs.MediaFeatures.isFirefox)) { fullscreenBtn.click(function() { var isFullScreen = (mejs.MediaFeatures.hasTrueNativeFullScreen && mejs.MediaFeatures.isFullScreen()) || player.isFullScreen; if (isFullScreen) { player.exitFullScreen(); } else { player.enterFullScreen(); } }); } else { var hideTimeout = null, supportsPointerEvents = (function() { // TAKEN FROM MODERNIZR var element = document.createElement('x'), documentElement = document.documentElement, getComputedStyle = window.getComputedStyle, supports; if(!('pointerEvents' in element.style)){ return false; } element.style.pointerEvents = 'auto'; element.style.pointerEvents = 'x'; documentElement.appendChild(element); supports = getComputedStyle && getComputedStyle(element, '').pointerEvents === 'auto'; documentElement.removeChild(element); return !!supports; })(); //console.log('supportsPointerEvents', supportsPointerEvents); if (supportsPointerEvents && !mejs.MediaFeatures.isOpera) { // opera doesn't allow this :( // allows clicking through the fullscreen button and controls down directly to Flash /* When a user puts his mouse over the fullscreen button, the controls are disabled So we put a div over the video and another one on iether side of the fullscreen button that caputre mouse movement and restore the controls once the mouse moves outside of the fullscreen button */ var fullscreenIsDisabled = false, restoreControls = function() { if (fullscreenIsDisabled) { // hide the hovers for (var i in hoverDivs) { hoverDivs[i].hide(); } // restore the control bar fullscreenBtn.css('pointer-events', ''); t.controls.css('pointer-events', ''); // store for later fullscreenIsDisabled = false; } }, hoverDivs = {}, hoverDivNames = ['top', 'left', 'right', 'bottom'], i, len, positionHoverDivs = function() { var fullScreenBtnOffsetLeft = fullscreenBtn.offset().left - t.container.offset().left, fullScreenBtnOffsetTop = fullscreenBtn.offset().top - t.container.offset().top, fullScreenBtnWidth = fullscreenBtn.outerWidth(true), fullScreenBtnHeight = fullscreenBtn.outerHeight(true), containerWidth = t.container.width(), containerHeight = t.container.height(); for (i in hoverDivs) { hoverDivs[i].css({position: 'absolute', top: 0, left: 0}); //, backgroundColor: '#f00'}); } // over video, but not controls hoverDivs['top'] .width( containerWidth ) .height( fullScreenBtnOffsetTop ); // over controls, but not the fullscreen button hoverDivs['left'] .width( fullScreenBtnOffsetLeft ) .height( fullScreenBtnHeight ) .css({top: fullScreenBtnOffsetTop}); // after the fullscreen button hoverDivs['right'] .width( containerWidth - fullScreenBtnOffsetLeft - fullScreenBtnWidth ) .height( fullScreenBtnHeight ) .css({top: fullScreenBtnOffsetTop, left: fullScreenBtnOffsetLeft + fullScreenBtnWidth}); // under the fullscreen button hoverDivs['bottom'] .width( containerWidth ) .height( containerHeight - fullScreenBtnHeight - fullScreenBtnOffsetTop ) .css({top: fullScreenBtnOffsetTop + fullScreenBtnHeight}); }; t.globalBind('resize', function() { positionHoverDivs(); }); for (i = 0, len = hoverDivNames.length; i < len; i += 1) { hoverDivs[hoverDivNames[i]] = $('').appendTo(t.container).mouseover(restoreControls).hide(); } // on hover, kill the fullscreen button's HTML handling, allowing clicks down to Flash fullscreenBtn .mouseover(function() { if (!t.isFullScreen) { var buttonPos = fullscreenBtn.offset(), containerPos = player.container.offset(); // move the button in Flash into place media.positionFullscreenButton(buttonPos.left - containerPos.left, buttonPos.top - containerPos.top, false); // allows click through fullscreenBtn.css('pointer-events', 'none'); t.controls.css('pointer-events', 'none'); // show the divs that will restore things for (i in hoverDivs) { hoverDivs[i].show(); } positionHoverDivs(); fullscreenIsDisabled = true; } }); // restore controls anytime the user enters or leaves fullscreen media.addEventListener('fullscreenchange', function(e) { restoreControls(); }); // the mouseout event doesn't work on the fullscren button, because we already killed the pointer-events // so we use the document.mousemove event to restore controls when the mouse moves outside the fullscreen button /* t.globalBind('mousemove', function(e) { // if the mouse is anywhere but the fullsceen button, then restore it all if (fullscreenIsDisabled) { var fullscreenBtnPos = fullscreenBtn.offset(); if (e.pageY < fullscreenBtnPos.top || e.pageY > fullscreenBtnPos.top + fullscreenBtn.outerHeight(true) || e.pageX < fullscreenBtnPos.left || e.pageX > fullscreenBtnPos.left + fullscreenBtn.outerWidth(true) ) { fullscreenBtn.css('pointer-events', ''); t.controls.css('pointer-events', ''); fullscreenIsDisabled = false; } } }); */ } else { // the hover state will show the fullscreen button in Flash to hover up and click fullscreenBtn .mouseover(function() { if (hideTimeout !== null) { clearTimeout(hideTimeout); delete hideTimeout; } var buttonPos = fullscreenBtn.offset(), containerPos = player.container.offset(); media.positionFullscreenButton(buttonPos.left - containerPos.left, buttonPos.top - containerPos.top, true); }) .mouseout(function() { if (hideTimeout !== null) { clearTimeout(hideTimeout); delete hideTimeout; } hideTimeout = setTimeout(function() { media.hideFullscreenButton(); }, 1500); }); } } player.fullscreenBtn = fullscreenBtn; t.globalBind('keydown',function (e) { if (((mejs.MediaFeatures.hasTrueNativeFullScreen && mejs.MediaFeatures.isFullScreen()) || t.isFullScreen) && e.keyCode == 27) { player.exitFullScreen(); } }); }, cleanfullscreen: function(player) { player.exitFullScreen(); }, containerSizeTimeout: null, enterFullScreen: function() { var t = this; // firefox+flash can't adjust plugin sizes without resetting :( if (t.media.pluginType !== 'native' && (mejs.MediaFeatures.isFirefox || t.options.usePluginFullScreen)) { //t.media.setFullscreen(true); //player.isFullScreen = true; return; } // store overflow docStyleOverflow = document.documentElement.style.overflow; // set it to not show scroll bars so 100% will work document.documentElement.style.overflow = 'hidden'; // store sizing normalHeight = t.container.height(); normalWidth = t.container.width(); // attempt to do true fullscreen (Safari 5.1 and Firefox Nightly only for now) if (t.media.pluginType === 'native') { if (mejs.MediaFeatures.hasTrueNativeFullScreen) { mejs.MediaFeatures.requestFullScreen(t.container[0]); //return; if (t.isInIframe) { // sometimes exiting from fullscreen doesn't work // notably in Chrome