webkitRequestFullScreen 不工作？

Question

我有這個用於 webkitRequestFullScreen 的 JSFiddle 示例。

我在 Mac OSX 上使用 Chrome 2，但該示例似乎不適用於我。 最初我編寫了自己的示例，但下面鏈接中的示例不是我編寫的。 仍然它似乎不起作用。

http://jsfiddle.net/2uNzk/1/

var test = document.querySelector('.test');

test.addEventListener('click', function () {

  if(test.requestFullScreen) {
    test.requestFullScreen();
  } else if(test.mozRequestFullScreen) {
    test.mozRequestFullScreen();
  } else if(test.webkitRequestFullScreen) {
    test.webkitRequestFullScreen();
  }
}, false);

但是以下示例確實有效：僅當我嘗試在 Plunker 或 JSFiddle 中重現它時，它似乎不起作用：

http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/

這是我的 plunker 示例：

 <!-- just to keep things in one place I put the JS here. -->
  <script type="text/javascript">
    function goFullscreen(id) {

      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet, 
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
        // This is how to go into fullscren mode in Firefox
        // Note the "moz" prefix, which is short for Mozilla.
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {

        // This is how to go into fullscreen mode in Chrome and Safari
        // Both of those browsers are based on the Webkit project, hence the same prefix.
        element.webkitRequestFullScreen();

      }
      // Hooray, now we're in fullscreen mode!
    }
  </script>



  <div class="example">
    <img class="video_player" src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" id="player2">
    <button onclick="goFullscreen('player2'); return false">Click Me To Go Fullscreen! (For real)</button>
  </div>

http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview

有任何想法嗎？ 我很困惑！

Answer 1

webkit 版本沒有將Fullscreen的s大寫。

Answer 2

對於其他人，我發現這個線程說如果您為元素（div 等）調用它，它在 iPhone 上不起作用： https : //developer.apple.com/forums/thread/133248

Answer 3

好的，我終於找到了簡單的答案。 對於 iOS 來說， webkitEnterFullscreen()將起作用。

const docEl = document.getElementById('player') as any; // Remove as any if not using typescript
if (!docEl) return;
if (docEl.requestFullscreen) docEl.requestFullscreen();
else if (docEl.webkitRequestFullscreen) docEl.webkitRequestFullscreen();
else if (docEl.mozRequestFullScreen) docEl.mozRequestFullScreen(); // Careful to the capital S
else if (docEl.msRequestFullscreen) docEl.msRequestFullscreen();
else if (docEl.webkitEnterFullscreen) docEl.webkitEnterFullscreen(); // Magic is here for iOS