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

Question

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

使用了 react-native-player 但它只呈现一个后屏。

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

平台目标：iOs

标签： reactjsreact-nativevideomobilereact-native-ios

Answer 1

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

以下是我尝试过的一些解决方法，并使其部分适用于许多性能挑战。

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

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

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

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

顺便说一句，我分别在 iOS 和 Android 上尝试了大多数这些解决方案，这两个平台都有自己的问题。