React-Native WebView嵌入YouTube视频在安卓设备上无法全屏。

Question

我正在尝试在我的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，但没有成功。

编辑

在进行了更多搜索后，我找到了这份文档关于全屏支持，并了解到我需要在webView.setWebChromeClient中实现onShowCustomView和onHideCustomView，我在我的应用程序的node_modules文件夹中进行了一些深入挖掘，并在位置“../ node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java”找到了ReactWebViewManager.java。

似乎需要添加一些自定义代码到webView.setWebChromeClient，但由于我在本地编程方面不是那么擅长，因此无法进一步进行。

- Manjeet Singh

---

添加一个com.google.android.youtube.player.YouTubePlayerView而不是添加一个Web视图怎么样？ - Charuක

所以我需要在我的本地代码中添加com.google.android.youtube.player.YouTubePlayerView。 - Manjeet Singh

<com.google.android.youtube.player.YouTubePlayerView android:id="@+id/youtube_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="30dp" />如果您想要添加一个视图并与之交互，只需在xml中添加该视图，并将其设置为match parent以获得全屏视图。 - Charuක

我正在使用react-native（不是在原生应用程序上工作）。 - Manjeet Singh

@ManjeetSingh 你最终解决了这个问题吗？ - Hauuguu

Answer 1

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

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

- Chris Parton

Answer 2

我甚至尝试使用带有allowfullscren="true"属性的iframe作为HTML，但是我没有获得任何成功。

你必须在一个带有属性的iframe中嵌入你的视频。

allowfullscreen="allowfullscreen" 

将上述属性赋予iFrame，顺便提一下allowfullscreen="true"是错误的输入。

- Alex