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

时间:2019-05-05 14:33:14

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

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

在尝试调试此问题时,我意识到PlayerStatus(如IFrame Player API中所述)是以错误的方式更改的: 如果视频未包装在iframe中,则PlayerStatus将从“未开始”更改为“缓冲”,再更改为“播放”。另一方面,将视频包装到iframe中后,PlayerStatus再次从“未启动”变为“缓冲”再变为“未启动”

但是,有一个奇怪的例外-安装并激活了Chrome扩展程序(例如AdBlock或LastPass)后,即使在iframe中,视频也可以正常播放。

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

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,但是经过数小时的尝试,我想我已经找到了解决问题的方法...在iframe中添加allow="autoplay"可以为我解决此问题,因为有时这没有什么意义无需添加即可。

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

这不能解释为什么5%的时间确实可以正常播放。无论如何,在包含videojs播放器的外部iframe标签中添加allow = autoplay,对我来说100%的时间是有效的。