如何修复 iframe 内嵌入的 YouTube 视频的无限加载？

Question

我正在使用 videojs-youtube 插件在我的网络应用程序中播放嵌入的 youtube 视频。最近我注意到当 web 应用程序被包裹在 iframe 中时，视频会卡在无限加载中。由于此过程，控制台不会显示任何相关错误。

在尝试调试此问题时，我意识到 PlayerStatus（如 IFrame Player API 中所述）正在以错误的方式更改：当视频未包含在 iframe 中时，PlayerStatus 从“未启动”变为“正在缓冲”并变为“玩'。另一方面，当视频被包装在 iframe 中时， PlayerStatus 再次从“未启动”变为“正在缓冲”到“未启动”。

但是有一个奇怪的例外 - 当安装并激活 AdBlock 或 LastPass 等 chrome 扩展程序时，视频可以正常播放，即使它在 iframe 内。

知道为什么会这样吗？谢谢 ：）

Answer 1

我遇到了同样的问题，但我想经过几个小时的尝试，我已经找到了解决问题的方法...添加allow="autoplay"到 iframe 为我解决了这个问题，它没有完全意义，因为有时不添加它也能工作。

为了澄清，我在 iframe 中使用 video.js 和 videojs-youtube.js，在该 iframe 内，如果您播放 Youtube 视频，则会在 iframe 内创建另一个 iframe。我猜测点击视频播放器播放 Youtube 视频不被视为用户与内部 iframe 交互，因为 videojs-youtube 以编程方式告诉 youtube 视频在该内部 iframe 中播放，而 Chrome 不允许视频在内部 iframe 中播放。除非用户与其交互，否则将播放 iframe。

这并不能解释为什么 5% 的时间它运行良好。无论如何，将allow=autoplay 添加到包含videojs 播放器的外部iframe 标记使其对我来说100% 有效。