个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 02:25:40 28 4
gpt4 key购买 nike

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

我有一个 Web 应用程序，它使用 JavaScript Fullscreen API 在全屏浏览器中显示。

在网络应用程序中有一个嵌入式 Youtube 播放器。当您全屏打开 Youtube 播放器，然后再次单击 Youtube 的全屏按钮退出播放器全屏时，它没有响应!

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

我已经创建了一个可以在这里查看的简化示例: http://run.plnkr.co/CjrrBGBvrSspfa92/

  1. 点击“全屏”按钮。
  2. 播放视频并点击全屏按钮。视频将全屏播放。
  3. 点击再次全屏按钮。它不会退出。

编辑:上面 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>

最佳答案

问题是我做了一些搜索，发现 Youtube 在使用 JavaScript Fullscreen API 时不知道视频是否全屏，Google 也不提供对 fo in 或退出全屏。因此，当您单击按钮并进入全屏时，您会看到播放器的全屏按钮未被按下。所以，为了回到窗口 View ，用户有两个选择: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

关于javascript - 嵌入式 Youtube 播放器不会从全屏退出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30963676/

28 4 0
文章推荐： javascript - 如何使用 Gulp 订购注入(inject)的文件？
文章推荐： java - Floyd-Warshall 算法 - 代表 "infinity"
文章推荐： java - 无法在 SOAPHandler 中记录完整的 SOAP 消息
文章推荐： javascript - 如何在运行时添加 SVG 元素 - Angular
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com