我在 React Native Expo 应用程序中使用嵌入式 YouTube 视频。嵌入的视频位于 react-native-webview
的 WebView
内。我遇到了一个奇怪的问题,我不确定它是在 YouTube 方面还是 React Native 方面。
当我尝试点击 Android 上的播放按钮时,我会看到 YouTube 视频上的开发者选项。视频无法播放,我无法“点击”这些选项。
当我按下播放按钮时,YouTube 嵌入式视频在 WebView 中的外观
尽管我明显点击了播放器中心的播放按钮,但我还是得到了这个菜单。 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/