android - YouTube 嵌入式视频在 Android 上单击“播放”按钮时显示开发人员选项

标签 android react-native webview youtube-iframe-api

我在 React Native Expo 应用程序中使用嵌入式 YouTube 视频。嵌入的视频位于 react-native-webviewWebView 内。我遇到了一个奇怪的问题,我不确定它是在 YouTube 方面还是 React Native 方面。

当我尝试点击 Android 上的播放按钮时,我会看到 YouTube 视频上的开发者选项。视频无法播放,我无法“点击”这些选项。

当我按下播放按钮时,YouTube 嵌入式视频在 WebView 中的外观 What happens when I click play

尽管我明显点击了播放器中心的播放按钮,但我还是得到了这个菜单。 Webview 似乎对用户触摸输入响应不佳,或者认为是长按输入。我没有长时间按视频。当我将 UI 精简为仅占据整个屏幕的 WebView 时,它工作得很好。长按时,我会看到弹出此菜单。但点击播放按钮一切都会按预期进行。

似乎一旦我减小了 WebView 的大小(即使 YouTube 播放器根本没有被切断或压扁),它就无法正确响应。在 iOS 上,一切正常。

设备问题发生于 当我开始在三星 Galaxy S7 上进行测试时,我注意到了这个问题。在 Google Pixel 3 模拟器上运行该应用程序似乎可以按预期工作。

这是一个简单的 WebView,其中嵌入了 YouTube 视频。

<WebView
     allowsInlineMediaPlayback={true}
     source={{ uri: "https://www.youtube.com/embed/WOi0vnzcEzA?playsinline=1&rel=0&mute=1autoplay=1&fs=0" }}
 />

谢谢

最佳答案

我终于弄清楚发生了什么事。我希望这可以帮助将来的人。

我的 WebView 被包裹在 TouchableWithoutFeedback 中。由于某种原因(这可能是正确的行为,但超出了我的 RN 功能),它“阻止”了正确的用户输入到 WebView 中。当我将 WebView 移到 TouchableWithoutFeedback 之外后,一切都按预期工作。

关于android - YouTube 嵌入式视频在 Android 上单击“播放”按钮时显示开发人员选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66021313/

相关文章:

java - 从错误的线程异常调用

android - ToolbarAndroid 未显示在 React Native 中

javascript - 如何更新文本输入值以使用货币格式

c# - UWP Webview 仅触发最后一个请求的 NavigationCompleted 事件

javascript - 仅使用 Javascript 从 android webview 打开 Google map 或新浏览器

java - 在android中创建动态微调器

android - 如何在默认后退按钮单击中将请求代码从子 Activity 返回到父 Activity

android - 如何在 webview android 上自动播放 iframe youtube

android - GC 运行过于频繁

javascript - 我正在尝试使用 React-Native 将按钮放置在屏幕底部,但我真的很难理解如何通过 Flex 支持正确地做到这一点