Question

我正在为YouTube iframe API制作自己的自定义UI。我正在尝试使用一些已记录的API全屏功能制作自己的全屏切换按钮，但是它们无法正常工作。

function Fullscreen_is_On() {
  return (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null) == null;
}

function Fullscreen_On(e) {
  if (e.requestFullscreen) e.requestFullscreen();
  else if (e.webkitRequestFullscreen) e.webkitRequestFullscreen();
  else if (e.mozRequestFullScreen) e.mozRequestFullScreen();
  else if (e.msRequestFullscreen) e.msRequestFullscreen();
  else {
    try {
      e.requestFullscreen();
    } catch (e) {}
  }
}

function Fullscreen_Off() {
  if (document.exitFullscreen) document.exitFullscreen();
  else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
  else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
  else if (document.msExitFullscreen) document.msExitFullscreen();
  else {
    try {
      document.exitFullscreen();
    } catch (e) {}
  }
}


function onYouTubeIframeAPIReady() {
  var p = new YT.Player(document.getElementById("player"), {
    height: "75%",
    width: "100%",
    videoId: "KaCQ8SQ6ZHQ",
    playerVars: {
      "autoplay": 0,
      "color": "red",
      "controls": 1,
      "disablekb": 1,
      "enablejsapi": 1,
      "fs": 1,
      "loop": 0,
      "modestbranding": 1,
      "playsinline": 1,
      "rel": 0,
      "showinfo": 0
    }
  });
  document.querySelector("button").onclick = function() {
    if (Fullscreen_is_On()) Fullscreen_On(p);
    else Fullscreen_Off();
  };
}

<html>

<head>
  <title></title>
  <script src="https://www.youtube.com/player_api"></script>
</head>

<body style="margin:0;padding:0;text-align:center;">
  <div id="player"></div>
  <button style="margin:5px;">Fullscreen Toggle</button>
</body>

</html>

为什么单击全屏按钮时无法将Youtube iframe全屏显示？

YouTube iframe API无法响应JS全屏命令

0 个答案: