在 ReactNative 应用程序中嵌入不同来源的视频的最佳实践解决方案是什么？

Question

我目前正在尝试将多个来源的视频实现到使用 Expo 和 ReactNative 构建的学习应用程序中。

我想包含以下视频源：

• YouTube
• 维梅奥
• 微软流
• 自定义 .mp4 链接

我尝试在以下配置中使用WebView：

<WebView
  ref={videoRef}
  onContentProcessDidTerminate={() => videoRef?.current?.reload()}
  javaScriptEnabled={true}
  sharedCookiesEnabled={true}
  scrollEnabled={false}
  allowsFullscreenVideo={true}
  //allowsInlineMediaPlayback={true}
  renderLoading={() => <ActivityIndicator />}
  renderError={() => <Text>An error occurred.</Text>}
  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
  source={{
    uri: src,
  }}
  mediaPlaybackRequiresUserAction={true}
/>

Android 和 iOS上的体验必须是无缝的，同时允许设备轮换。当用户以纵向模式启动视频并旋转设备时，我需要视频像 YouTube 应用程序一样继续无缝播放。

目前，我面临的问题是，我的解决方案在旋转屏幕时不起作用。视频停止，播放器关闭，视频暂停。然后方向锁定回纵向模式（这是应用程序所需的旋转）。我也尝试过，ScreenOrientation.unlockAsync()但我仍然面临同样的问题。使用<Video />from同样的事情expo-av。

回顾一下，一些核心要求是：

• 视频也需要手动启动，不能自行启动。
• 允许完全的设备旋转自由
• 旋转设备时不得停止
• 必须内联和全屏工作
• 必须允许多个来源
• 必须适用于 Android 和 iOS

一个人如何去完成这样的事情呢？

Answer 1

您可以使用 Amazon IVS Player 进行本机反应：[https://github.com/aws/amazon-ivs-react-native-player][1]。它是一个开箱即用的非常简约的视频播放器，因此您需要的所有基本功能都必须由您自己实现，例如旋转、自动播放、暂停/继续等。但另一方面，它可以通过编程来执行您想要的任何操作。需要它来做。另外它不是一个网络视图。