Reputation: 21
I'm using mediaelement.js version 2.16.4 to load video in an iframe created by thickbox.js. When I try to click fullscreen button in firefox-37.0.2/IE-11 the video goes to fullscreen but immediately goes back to smaller size of the iframe. If I don't initialize mediaelement and only the HTML5 tag then the fullscreen works fine in an iframe. So, it has to do something with the mediaelement player. This doesn't happen in Chrome! Can anybody guide me here why this is happening and how it can be resolved?
FYI: I have "webkitallowfullscreen mozallowfullscreen allowfullscreen" in the iframe.
<video id="videoPlayer" width="100%" height="100%" controls="controls" preload="none" autoplay="true">
<source type="video/mp4" src="<%=Url%>" />
</video>
$(document).ready(function() {
if ($('video')) {
var player = $('video').mediaelementplayer({
videoWidth: '100%',
videoHeight: '100%',
// initial volume when the player starts
startVolume: 0.8,
// enables Flash and Silverlight to resize to content size
//enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
isNativeFullScreen: true,
success: function (mediaElement, domObject, player) {
mediaElement.addEventListener('ended', function () {
player.exitFullScreen();
}, false);
}
});
}
});
Upvotes: 1
Views: 1043
Reputation: 21
I found the issue of fullscreen in firefox/IE. It's the following code in mediaelement-and-player.js where there is a manual exit from fullscreen. For me the 'zoomMultiplier' variable is 1.25 which is causing the problem. I can comment this code but not sure if it breaks other scenario? -
if (t.isInIframe) {
// sometimes exiting from fullscreen doesn't work
// notably in Chrome <iframe>. Fixed in version 17
setTimeout(function checkFullscreen() {
if (t.isNativeFullScreen) {
var zoomMultiplier = window["devicePixelRatio"] || 1;
// Use a percent error margin since devicePixelRatio is a float and not exact.
var percentErrorMargin = 0.002; // 0.2%
var windowWidth = zoomMultiplier * $(window).width();
var screenWidth = screen.width;
var absDiff = Math.abs(screenWidth - windowWidth);
var marginError = screenWidth * percentErrorMargin;
// check if the video is suddenly not really fullscreen
if (absDiff > marginError) {
// manually exit
t.exitFullScreen();
} else {
// test again
setTimeout(checkFullscreen, 500);
}
}
}, 500);
}
Upvotes: 1