react-native webview embed youtube video在Android中没有全屏选项答案

【问题标题】：react-native webview embed youtube video doesn't have fullscreen options in Androidreact-native webview embed youtube video在Android中没有全屏选项
【发布时间】：2016-11-28 13:10:21
【问题描述】：

我正在尝试在我的 react-native 应用程序中嵌入 youtube 视频，它工作正常，但我无法获得这些视频的全屏按钮/功能。这是我的代码：

 <WebView
  source={{uri: "https://www.youtube.com/embed/VaC9CivyV7I?version=3&enablejsapi=1&rel=0&autoplay=1&showinfo=0&controls=1&modestbranding=0"}}
style={{height:240, width:width, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
 />

我什至尝试将iframe 用作带有allowfullscren="true" 的html，但没有成功。

编辑

经过一番搜索，我发现了这个文档for Full screen support，并知道我需要在webView.setWebChromeClient 中实现onShowCustomView 和onHideCustomView，我在我的应用程序的node_modules 文件夹中挖掘了一下，发现了@ 987654328@ 在位置 *"../node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java"。

似乎可能需要添加一些自定义代码 webView.setWebChromeClient，但由于我在原生编程方面不是那么好，因此无法进一步进行。

【问题讨论】：

添加一个 com.google.android.youtube.player.YouTubePlayerView 怎么样？
所以我需要在我的本地代码中的某处添加 com.google.android.youtube.player.YouTubePlayerView
您可以在 xml 中添加一个视图并根据需要使用它，只需使其与父级匹配即可获得完整视图
我正在使用 react-native（不适用于原生应用）
@ManjeetSingh 你能解决这个问题吗？

标签： webview react-native youtube-api

【解决方案1】：

WebView 组件接受 allowsFullscreenVideo 属性。当此属性为 true 时，全屏图标将变为活动状态。

见https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#allowsfullscreenvideo。

【讨论】：

【解决方案2】：

我什至尝试将 iframe 用作带有 allowfullscren="true" 的 html，但没有成功。

您必须将视频嵌入到带有属性的iframe 中。

allowfullscreen="allowfullscreen"

将上述属性提供给 iFrame，供您参考，allowfullscreen="true"输入错误。

【讨论】：