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

Posted 2023-03-31

【中文标题】如何在 react-native 中实现具有透明背景的视频

【英文标题】：How to implement video with transparent background in react-native

【发布时间】：2018-05-16 10:29:24

【问题描述】：

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

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

尝试使用 https://www.w3schools.com/html/mov_bbb.mp4 本地加载和通过 uri 加载，并且成功了。

平台目标：ios

【问题讨论】：

我也遇到了同样的问题，请问您知道怎么解决了吗？

ios也有同样的问题，在android上可以设置背景色

透明 PNG 可能是您最好的选择。如果图形是基于矢量的，那么我建议使用 Lottie，它允许您从 After Affects 导出为 SVG (JSON)，以便在您的移动或网络应用程序中使用：airbnb.io/lottie/#

【参考方案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 上分别尝试了这些解决方案中的大部分，这两个平台都有自己的问题。