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视频网址中添加其他参数，以尝试查看是否可以执行任何操作：

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

目前要修复我已恢复使用InAppBrowser插件的问题，但我真的想使用iframe。

Answer 1

似乎Cordova中的iframe需要在config.xml中设置allow-navigation标志。 E.g：

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

iOS上的Cordova App中的iframe Youtube视频不再工作

1 个答案: