Un utente ha chiesto informazioni su MediaElement.js - HTML5 Video & Audio Player di Wordpress

chiamata a schermo intero dall’interno di iFrame

Un utente ha chiesto ๐Ÿ‘‡

Ho il multiplayer in iFrame. Funziona bene, tranne il pulsante a schermo intero. Un obiettivo = “_ genitore” farebbe il trucco, o c’รจ un modo migliore per gestirlo?

La funzione si chiama:

fullscreenBtn.addEventListener('click', function () {
  var isFullScreen = Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN || player.isFullScreen;
  if (isFullScreen) {
    player.exitFullScreen();
  } else {
    player.enterFullScreen();
  }

enterFullScreen: function enterFullScreen() {
var t = this,
isNative = t.media.rendererName !== null && /(html5|native)/i.test(t.media.rendererName),
containerStyles = getComputedStyle(t.getElement(t.container));

if (!t.isVideo) {
return;
}

if (t.options.useFakeFullscreen === false && Features.IS_IOS && Features.HAS_IOS_FULLSCREEN && typeof t.media.originalNode.webkitEnterFullscreen === 'function' && t.media.originalNode.canPlayType((0, _media.getTypeFromFile)(t.media.getSrc()))) {
t.media.originalNode.webkitEnterFullscreen();
return;
}

(0, _dom.addClass)(_document2.default.documentElement, t.options.classPrefix + 'fullscreen');
(0, _dom.addClass)(t.getElement(t.container), t.options.classPrefix + 'container-fullscreen');

t.normalHeight = parseFloat(containerStyles.height);
t.normalWidth = parseFloat(containerStyles.width);

if (t.fullscreenMode === 'native-native' || t.fullscreenMode === 'plugin-native') {
Features.requestFullScreen(t.getElement(t.container));

if (t.isInIframe) {
setTimeout(function checkFullscreen() {

if (t.isNativeFullScreen) {
var percentErrorMargin = 0.002,
windowWidth = _window2.default.innerWidth || _document2.default.documentElement.clientWidth || _document2.default.body.clientWidth,
screenWidth = screen.width,
absDiff = Math.abs(screenWidth - windowWidth),
marginError = screenWidth * percentErrorMargin;

if (absDiff > marginError) {
t.exitFullScreen();
} else {
setTimeout(checkFullscreen, 500);
}
}
}, 1000);
}
}

t.getElement(t.container).style.width = '100%';
t.getElement(t.container).style.height = '100%';

t.containerSizeTimeout = setTimeout(function () {
t.getElement(t.container).style.width = '100%';
t.getElement(t.container).style.height = '100%';
t.setControlsSize();
}, 500);

if (isNative) {
t.node.style.width = '100%';
t.node.style.height = '100%';
} else {
var elements = t.getElement(t.container).querySelectorAll('embed, object, video'),
_total = elements.length;
for (var i = 0; i < _total; i++) {
elements[i].style.width = '100%';
elements[i].style.height = '100%';
}
}

if (t.options.setDimensions && typeof t.media.setSize === 'function') {
t.media.setSize(screen.width, screen.height);
}

var layers = t.getElement(t.layers).children,
total = layers.length;
for (var _i = 0; _i < total; _i++) {
layers[_i].style.width = '100%';
layers[_i].style.height = '100%';
}

if (t.fullscreenBtn) {
(0, _dom.removeClass)(t.fullscreenBtn, t.options.classPrefix + 'fullscreen');
(0, _dom.addClass)(t.fullscreenBtn, t.options.classPrefix + 'unfullscreen');
}

t.setControlsSize();
t.isFullScreen = true;

var zoomFactor = Math.min(screen.width / t.width, screen.height / t.height),
captionText = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-text');
if (captionText) {
captionText.style.fontSize = zoomFactor * 100 + '%';
captionText.style.lineHeight = 'normal';
t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = (screen.height - t.normalHeight) / 2 - t.getElement(t.controls).offsetHeight / 2 + zoomFactor + 15 + 'px';
}
var event = (0, _general.createEvent)('enteredfullscreen', t.getElement(t.container));
t.getElement(t.container).dispatchEvent(event);
},

Lanciatore di thread

(@nc_nc)

2 anni, 6 mesi fa

Ora ho scoperto che funziona proprio nel modo in cui ne ho bisogno. Seo html 5 all’interno di iFrame – il genitore sta ancora traducendo html 4.01.

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *