iOS 上 Cordova 应用程序中的 iframe Youtube 视频不再工作

Question

我的 Cordova 应用程序曾经能够将 Youtube 视频插入页面并使用以下代码在 iOS 上使用 iframe 播放它们：

// youtube source URL
var src = 'https://www.youtube.com/embed/<VIDEOID>?autoplay=1&rel=0';

// iframe for everybody else
var element = 'iframe';

// x-ms-webview for windows app
if ( UTIL.isWindows() ) {
  element = 'x-ms-webview';
}


var $iframe = $( document.createElement( element ) );

$iframe.attr( 'id', 'streaming_video_player' );
$iframe.attr( 'width', '400' );
$iframe.attr( 'height', '300' );
$iframe.attr( 'frameborder', '0' );
$iframe.attr( 'allowfullscreen', 'allowfullscreen' );
$iframe.attr( 'src', url );

$('#video_container').html( $iframe );
				

它仍然可以在 Windows 中使用 x-ms-webview 元素而不是 iframe。

有时，我不知道什么时候停止工作，它只是在 iframe 所在的位置显示一个白框。我在 Safari 中检查了它并插入了 iframe，但来自 Youtube 的 iframed 页面是空白的。

不再需要 Cordova 的白名单插件，但我尝试添加它没有任何运气。

我还验证了我在 plist 中设置了以下影响媒体播放的键：

OpenAllWhitelistURLsInWebView = YES
MediaPlaybackRequiresUserAction = NO
AllowInlineMediaPlayback = YES

我还将它作为我的 config.xml 中的首选项，如下所示：

<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="true" />

此外，我尝试在 Youtube 视频 URL 中添加其他参数，以尝试查看是否有任何作用：

html5=1
html5=true
A few others I saw scattered around the net

为了解决这个问题，我已经恢复使用 InAppBrowser 插件，但我真的很想使用 iframe。

Answer 1

Cordova 中的 iframe 似乎需要在 config.xml 中设置允许导航标志。例如：

<allow-navigation href="https://*youtube.com/*"/>