Как играть в HTML5-игры в полноэкранном режиме «Совместимость с различными браузерами» - PullRequest
Новая
       34

Как играть в HTML5-игры в полноэкранном режиме «Совместимость с различными браузерами»

0 голосов
/ 14 апреля 2019

Я искал самый простой способ играть в игры HTML5 на экранах разных размеров для настольных компьютеров и мобильных устройств. Также я хотел, чтобы при входе в код была кросс-браузерная совместимость полноэкранный режим!

Я перепробовал слишком много решений, но ничего не получилось, как ожидалось, некоторые из них работают в определенном браузере, а другие не работают, пока я не создал этот код и не протестировал его в моих играх html5. 

<div class="iframe">
      <iframe id="player" src="https://h5.4j.com/Piano-Tiles-2-Online/index.php?pubid=al3abmizo" allowfullscreen></iframe>
    </div>

    <script>
      function goFullscreen(id) {
        // Add element in fullscreen mode
        var element = document.getElementById(id);
        // Hide function in the browsers that not support fullscreen mode yet, 
        // Check to see if element available before calling it.
        if (element.mozRequestFullScreen) {
          // Fullscren mode in Firefox
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          // Fullscreen mode in Chrome and Safari
          element.webkitRequestFullScreen();
          // Fullscreen mode in IE/Edge
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
       }
       // Fullscreen mode activated for all browsers!
    }
    </script>

    <!-- Play Button -->
    <button class="playbtn" onClick="goFullscreen('player'); return false"><i class="fa fa-compress"></i> Play in fullscreen more</button>

Проверьте это здесь https://jsfiddle.net/jodyshop/zd3x6ukL/

...