Ionic iOS上的嵌入式抽搐播放器不工作

Question

我用Ionic创建了一个应用程序，它嵌入了流和剪辑的抽搐播放器。

var url = https://player.twitch.tv/?video=v${videoId}&time=${time}&parent=localhost

<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>

在安卓系统上，它的工作非常完美，但在iOS应用程序中，iframe将不会显示，也没有可用的播放器。只是一个白色的屏幕。

有人知道什么问题可能与ios有关吗？

Answer 1

我也有同样的问题。安全限制确实是罪魁祸首:在iframe试图加载时，我打开了Safari控制台，并看到了这个错误：

拒绝加载https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true，因为它没有出现在内容安全策略的框架-祖先指令中。

查看Twitch返回的安全头，它看起来如下所示：

Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*

然而，当使用Ionic WebView时，根据它的文档

iosScheme <preference name="iosScheme" value="httpsionic" /> 默认值是离子的 配置该应用程序用于加载内容的方案。 像http、https或file这样的值无效，而是使用默认值。

因此，您的WKWebView默认将ionic://locahost作为其应用程序URL，这与the指定的http://localhost和https://localhost前缀不匹配。

我尝试在Twitch中使用&parent=ionic://localhost。WKWebView不拒绝打开iframe，但是to本身对该参数中的特殊字符感到抓狂，并且拒绝呈现它的播放器页面。

​

​

在我看来，目前，iOS Ionic/Cordova应用程序和Twitch是相互排斥的。

编辑：，我在to论坛上发现了一堆关于这个话题的讨论(1，2)，但这些讨论在技术上都没有深入到可以找到可行的解决方案或解决办法的地步。不幸的是，线程在一个月的不活动之后就关闭了，所以我不得不在to论坛上打开另一个线程，从我的角度解释技术细节。我还在他们的用户语音反馈门户中添加了一个功能请求。我害怕试图让特维奇意识到/接受他们应该对移动嵌入式做些什么，这是我们目前所能做的。下面是它的链接：

https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic