Question

我想要这样做的原因是我可以在全屏幕中打开一个Embeded youtube视频。目前，如果我点击Webview，它会将youtube视频打开到本机IOS视频播放器中。这就是我要的。

但是，我需要能够以编程方式执行此操作而无需客户端单击它。为什么？用户点击图片库中的图片（仅图片 - 没有视频），所以我关闭了图库，这就是我想要全屏打开WebView（以编程方式触发点击它）（注意：点击时）在webview上，它会立即将youtube视频打开到播放器中。

这甚至可能吗？

还有其他方法可以改变UI / UX，我想尝试避免这种情况（如果可能的话）。

Answer 1

如果您想使用react-native app全屏查看YouTube视频，请使用以下代码：

$ npm install react-native-youtube -S
$ react-native link


<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false
  fullscreen={true}       // control whether the video should play in fullscreen or inline
  loop={true}             // control whether the video should loop when ended

  onReady={e => this.setState({ isReady: true })}
  onChangeState={e => this.setState({ status: e.state })}
  onChangeQuality={e => this.setState({ quality: e.quality })}
  onError={e => this.setState({ error: e.error })}

  style={{ alignSelf: 'stretch', height: 300 }}
/>

有关详细信息，请参阅this link。

Answer 2

我的回答只围绕这个问题：

这甚至可能吗？

=＆GT;是的可能

如果您想在Webview上为React-native显示youtube。这是给你的链接：

https://dev.to/mutatedbread/lazy-approach-to-display-youtube-videos-in-a-react-native-app-bfc

它绝对适用于android和ios（之前我曾尝试过）。有一个问题是：＆＃34;你无法全屏使用Android。＆＃34;

适用于使用Android的webview显示的所有类型的媒体。这是因为Android pollicy。（但是他们允许覆盖它） =＆GT;阅读：https://developer.android.com/reference/android/webkit/WebView.html（搜索＆＃34;全屏支持＆＃34;）

要通过，您可以搜索一些为Android重新实现react-native Webview组件的项目。这是我使用的那个： https://www.npmjs.com/package/react-native-android-wv-video但还有其他人。

如果你想自我实现，这里是链接： Playing HTML5 video on fullscreen in android webview

最后：解决Android的全屏问题后，您可以利用youtube iframe强制自动启动或在加载youtube视频时自动全屏： https://developers.google.com/youtube/iframe_api_reference （如果您按照本答案中第一个链接的说明操作，那么您已经拥有了youtube iframe）

是否可以使用React-native以编程方式触发onView on WebView？

2 个答案: