Animate CC HTML5 - переключение в полноэкранный режим - PullRequest
Новая
       15

Animate CC HTML5 - переключение в полноэкранный режим

0 голосов
/ 28 июня 2018

У меня есть этот код (ниже) на кнопке, чтобы заставить мою HTML5-игру работать в полноэкранном режиме, но я бы хотел, чтобы она вернулась и с помощью кнопки - сейчас она работает только с помощью клавиши ESC. Это возможно? 

this.fsbtn.addEventListener("click", doFullscreen);

function doFullscreen() {
    var i;
    var elem = document.getElementById("animation_container");
    var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];

    for (i = 0; i < 4; i++) {
        if (elem[fs[i]]) {
            elem[fs[i]]();
            break;
        }
    }
}

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Конечно, это возможно. Измените вашу doFullscreen функцию на , переключающую одну , которая проверяет, является ли она полноэкранной или нет: 

function toggleFullscreen(event) {
    var element = document.body;

    if (event instanceof HTMLElement) {
        element = event;
    }

    var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

    element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen ||           element.mozRequestFullScreen || function () {
        return false;
    };
    document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen ||           document.mozCancelFullScreen || function () {
        return false;
    };

    isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
0 голосов
/ 28 июня 2018

Прочитайте документацию здесь для полноэкранного API

Вы можете выйти из полноэкранного режима, используя функции, перечисленные ниже (для более подробной документации)

enter image description here

В коде JS / HTML вы можете добавить кнопку с абсолютной позицией и высоким z-индексом. Напишите новый обработчик щелчков для добавленной кнопки и запустите функцию cancelFullscreen, вот и все.

Пример функции JS для полноэкранного режима: 

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        videoElement.mozCancelFullScreen();
      } else {
        videoElement.webkitCancelFullScreen();
      }
    }
  }

Рабочий пример вы можете увидеть здесь: https://developer.mozilla.org/samples/domref/fullscreen.html

...