全屏 API 无法在 safari、ios 上运行

Question

所以，我使用这个代码：

var toggleBtn = false;
function btnClick() {
  toggleBtn = !toggleBtn;
  document.getElementById("testText").innerHTML = toggleBtn;
  if (toggleBtn) {
    openfullscreen();
  }
  else {
    closefullscreen();
  }
}

function openfullscreen() {
    // Trigger fullscreen  
    if (document.getElementById("parent").requestFullscreen) {
      document.getElementById("parent").requestFullscreen();
    } else if (document.getElementById("parent").mozRequestFullScreen) { /* Firefox */
      document.getElementById("parent").mozRequestFullScreen();
    } else if (document.getElementById("parent").webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      document.getElementById("parent").webkitRequestFullscreen();
    } else if (document.getElementById("parent").webkitRequestFullScreen) { /* Chrome, Safari and Opera */
      document.getElementById("parent").webkitRequestFullScreen();
    }
  else if (document.getElementById("parent").msRequestFullscreen) { /* IE/Edge */
      document.getElementById("parent").msRequestFullscreen();
    }
  }

 function closefullscreen(){
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.webkitExitFullScreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullScreen();
    }
   else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
  }

我在 Safari、iOS 15.5 上遇到问题。它有效，但并不总是有效。有时，当我按下按钮并将方向更改为横向全屏时可以正常工作，有时却不能。也许有人知道是否可以让全屏 API 适用于 safari、iPhone，就像我在 Android 上所做的那样？

Answer 1

IOS Safari

输入：

document.querySelector("video").webkitEnterFullScreen();

退出：

document.querySelector('video').webkitExitFullscreen();