reactjs - 如何在react-native中实现透明背景的视频

Question

如何在 React-native 中实现具有透明背景的视频播放器？视频以扩展名 .mov 保存(唯一发现支持透明背景的扩展名)。

使用了react-native-player，但它只渲染了一个后屏幕。

尝试过 https://www.w3schools.com/html/mov_bbb.mp4两者都在本地加载并通过 uri 加载，并且有效。

平台目标:iOs

Answer 1

我需要同样的东西并尝试了许多不同的方法，我的结论是透明电影文件不是公认的做法/标准。只有苹果quicktime支持。

以下是我尝试过的一些解决方法，使其能够部分应对许多性能挑战。

最好的工作方法是导出所有 mov 帧(无论您可以接受什么帧速率 - 对我来说，我试图渲染将要导出为 gif 的东西，所以即使 15 fps 对我来说也适用)。将影片帧导出为透明 png。 FFmpeg 可以轻松做到这一点。

然后使用简单的循环，从 js 代码加载和更新框架。这仍然非常具有挑战性，因为从 jsbundle 加载 ImageView 中的每个帧根本无法满足您的帧速率需求。根据我的经验，从 jsbundle 加载资源时我只看到较低的个位数帧速率。另一方面，对此有一个解决方案。您可以将 png 文件放入 ios/xcode 中的 xcassets 中，以及将 android 中的可绘制文件中。然后使用 { uri: 'filename' } 从 native 应用程序加载资源。这为我在 iOS 上带来了非常好的质量和速度，即使是 1080p 质量的 20-30 秒视频长度。不幸的是，这遇到了内存问题，并且在 Android 上不起作用 - Android 只为我处理了 100something 帧。如果您的电影总共有超过 150-200 帧，无论 fps 是多少，它都会达到内存限制。我花了一个多星期的时间来研究克服内存问题的替代方法，将许多大位图加载到内存中以便在应用程序中顺序显示它们。有一些理论上的方法可以在没有堆大小限制的情况下在 Android 上利用内存，但我发现它的级别太低并且超出了我的 android/java 知识。

我尝试过但没有成功的另一条路径是 webM 格式。它是来自 google 的 webp 格式，支持一些推送，但我在网上找不到足够的关于 webm 播放的资源。我成功地播放了一个 webm 文件，但它的工作原理就像 gif 播放器一样，几乎所有播放器都没有明确的方法来支持透明的动画 gif。所以我也无法使用 webp/m 找到解决方案。

现在我正在尝试使用视频上的其他 RN 动画元素来伪造视频的透明部分。

顺便说一句，我分别在 iOS 和 Android 上本地尝试了大部分解决方案，但这两个平台都有各自的问题。