javascript - 如何修复 iframe 中嵌入式 YouTube 视频的无限加载?

标签 javascript iframe youtube-api video.js youtube-iframe-api

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

在尝试调试此问题时,我意识到 PlayerStatus(如 IFrame Player API 中所述)正在以错误的方式更改: 当视频未包含在 iframe 中时,PlayerStatus 会从“未启动”变为“正在缓冲”和“正在播放”。另一方面,当视频被包裹在 iframe 中时,PlayerStatus 再次从“unstarted”变为“buffering”再变为“unstarted”

但有一个奇怪的异常(exception) - 当安装并激活诸如 AdBlock 或 LastPass 之类的 chrome 扩展程序时,视频可以正常播放,即使它在 iframe 中也是如此。

知道为什么会这样吗? 谢谢:)

最佳答案

我遇到了同样的问题,但我认为经过数小时的尝试我已经找到了解决问题的方法...将 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% 的时间内正常工作。

关于javascript - 如何修复 iframe 中嵌入式 YouTube 视频的无限加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55993046/

相关文章:

javascript - 正则表达式 javascript 结果与预期不同

javascript - 可以在类里面调用 fancybox 吗?

Javascript 响应式图片库缩略图

youtube - YouTube数据API V3:使用playlistItems.lsit可以检索的最大项数是100000吗?

javascript - 使用 setInterval 和 clearInterval 通过 HTML 输入复选框启动和停止文件重新加载

jquery - 从 iframe 运行父 jquery

html - 是否可以将 iframe 内容移到更高的位置?

javascript - 在布局顶部保留自定义 div,同时允许用户浏览网站

youtube - 如何从 Google+ ID 获取 YouTube channel 信息

javascript - 来自 Youtube API v3 的内容详细信息、持续时间和统计信息的问题