Question

嗯，我认为这是一个主要的Youtube错误，但我没有找到任何关于它的报告。

我有一个使用JavaScript Fullscreen API在全屏浏览器中显示的网络应用程序。

在网络应用中有一个嵌入式Youtube播放器。当您以全屏模式打开Youtube播放器时，再次单击Youtube的全屏按钮以退出播放器的全屏，它不会响应！

我确信这与浏览器已经处于全屏模式这一事实有关，因此存在某种冲突。

我创建了一个简化示例，可在此处查看： http://run.plnkr.co/CjrrBGBvrSspfa92/

点击“GO FULLSCREEN”按钮。
播放视频并点击全屏按钮。该视频将全屏显示。
点击再次全屏按钮。它不会退出。

编辑：上面的html文件的代码在这里：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe>
<button id="btn">GO FULLSCREEN</button>

<script type="text/javascript">
    document.getElementById("btn").addEventListener("click", function() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    });
</script>
</body>
</html>

Answer 1

问题是我做了一些搜索，当使用 JavaScript Fullscreen API 时，Youtube不知道视频是否全屏显示，Google也没有提供API调用或全屏。因此，当您单击按钮并进入全屏模式时，您将看到未按下播放器的全屏按钮。因此，为了返回窗口视图，用户有两个选择： 1）点击按钮2次（第一次，玩家尝试全屏进入，按钮改变状态，第二次，玩家进入窗口模式） - 这是解决方案 2）单击键盘上的Esc。

我查看了HTML5播放器。

此外，我尝试在YouTube的iframe中注入一个按钮，以便我可以选择它以退出全屏，但它不起作用......实际上本来是愚蠢的。

这应该有效：

<div id="videoplayer"></div>
<p><button id="btn">GO FULLSCREEN</button></p>

<script type="text/javascript">
var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('videoplayer', {
      height: '380',
      width: '500',
      videoId: 'h7ArUgxtlJs',
      fs: 1
  });
}

document.getElementById("btn").addEventListener("click", function() {
  var elem = document.getElementById('videoplayer');
  var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
  if (requestFullScreen) {
    requestFullScreen.bind(elem)();
  }
});
</script>

你可以使用经典的嵌入，我相信。

Working demo

Answer 2

这可能会有所帮助：“退出全屏模式”：

// Whack fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

Source

旁注： Youtube的API在2015年即可自定义方面仍然非常稀缺（由于它依赖于如此多的iFrame，他们不想要你重新打造他们的球员）。你很可能会使用一堆时髦的JavaScript来破解你想要的东西，这可能会变得混乱和不稳定。最好的做法是利用众多可定制视频播放器中的一个，您可以通过JS获得更多控制权;例如JW player，Video.js，Flow player，popcorn.js等。

Answer 3

因为您的按钮点击处理程序仅全屏但不会退出。

尝试使用exitFullscreen()函数和fullscreenElement属性。

这样的事情：

更新：

仅在Firefox中测试过。它有自己的attrs（mozFullScreenElement和mozCancelFullScreen）

document.getElementById("btn").addEventListener("click", function() {
    var elem = document.documentElement;
    if (document.mozFullScreenElement) { // null if not in fullscreen
       document.mozCancelFullScreen();
    } else {
       elem.mozRequestFullScreen();
    }
    // and other prefixes omitted
});

其他浏览器应该采用相同的逻辑。

嵌入式Youtube播放器不会从全屏退出

3 个答案: