时间戳

首页 > 解决方案 > 当 iframe 中嵌入的 YouTube 视频不在子窗口中播放时，如何修复它？

javascript - 当 iframe 中嵌入的 YouTube 视频不在子窗口中播放时，如何修复它？

问题描述

我目前正在制作网页游戏。游戏的一部分是您的个人资料，您可以在其中使用一些支持 HTML 的工具来制作基于字符的酷炫描述。在配置菜单中，您可以输入音频链接，出于明显的安全原因，我将其转换为 iframe，而不是让他们自己做。

Bla-bla-bla，您可以打开和关闭自动播放，很酷的问题是，我首先遇到了 iframe 的自动播放功能的一些奇怪问题。

看，当我点击按钮打开这个子窗口时，它会将链接编译成带有自动播放标签的 iframe 和所有内容，甚至可以完美播放，这太棒了！Buuut 如果我听了超过 5-10 秒，然后关闭并重新打开子窗口，它将开始暂停。隐藏与否无关紧要。立即关闭和重新打开根本不会遇到这个问题。

我正在通过 window.open 制作子窗口。每次都是一个新窗口，如果这很重要的话。这是我用来生成 iframe 的代码：

function openWindow(html, charName, audio) {
    if (VS.World.getClients()[0].profile) { 
        VS.World.getClients()[0].profile.close();
    }
    var newWindow = window.open("", charName+"'s Profile", "height=600,width=900,status=no,toolbar=no,menubar=no,location=no");
    newWindow.document.write(html);
    if (audio) {
        var audioFrame = newWindow.document.createElement("iframe")
        audioFrame.width = 400
        audioFrame.height = 400
        audioFrame.id = "audioiframe"
        audioFrame.style = "display: none;"
        audioFrame.src = `${audio.replace("watch?v=","embed/")}?autoplay=1`
        audioFrame.allow = "autoplay; accelerometer; encrypted-media; gyroscope; picture-in-picture"
        audioFrame.frameBorder = "0"
        var att = newWindow.document.createAttribute("allowfullscreen")
        audioFrame.setAttributeNode(att)
        newWindow.document.body.appendChild(audioFrame)
    }
    newWindow.document.title = charName+"'s Profile"
    var x = newWindow.document.getElementById("audioiframe")
    newWindow.document.body.removeChild(newWindow.document.getElementById("audioiframe"))
    newWindow.document.body.appendChild(x)
    VS.World.getClients()[0].profile = newWindow;
}

如果它有帮助，那么在子窗口中的一切看起来都和预期的完全一样。如果这是一个问题 - 或问题 -使视频可见在这里是不可能的，尽管正如我之前所说的那样，这样做并没有/没有解决手头的问题。或者改变它，甚至。

我也通过 document.write 尝试过。后者的“removeChild”、“appendChild”废话只是为了看看我是否可以修复它，因为在控制台中编辑 HTML 并在那里读取 iframe 每次都有效。

编辑：还值得一提的是我在我的本地主机服务器上做这一切，还没有尝试过真正的交易。

标签： javascripthtmliframeyoutube-api

解决方案

好吧，经过将近十二个小时的折腾，我终于弄明白了。

基本上，在与父窗口交互之前，YouTube 的 API 不会让您播放视频。这是有道理的，它也没有列在我能找到的大多数文档中，因为（我在这里假设）你几乎总是会让用户关注你试图播放视频的任何窗口。

无论如何，遵守这一点我没有任何问题，我的玩家甚至可能会喜欢它，因为爆破音乐有时会很烦人。

如果将来有人遇到这种情况，我的解决方法很简单：

  1. 如果用户尚未与子页面进行交互并且您尝试播放视频，它会将视频的播放状态设置为缓冲 (3)，然后设置为未启动 (-1)。
  2. 因此，我们尝试在播放器加载时播放视频（在 onPlayerReady 下）。
  3. 在同一个事件函数中，我们建立了一个间隔（在我的例子中是 JS 中的 setInterval），它反复检查玩家的状态是否为 -1（未启动）。
  4. 如果是，我们尝试在每个间隔运行一次播放视频，直到子窗口关闭或rr-
  5. 直到播放器的状态变为1，此时我们知道页面已经被点击，视频正在播放，我们可以放心的清除间隔，停止关心。

祝未来的程序员好运！

推荐阅读