如何在React Native中实现带有透明背景的视频

Question

如何在React Native中实现带有透明背景的视频

reactjsreact-nativevideomobilereact-native-ios

6

如何在React Native中实现带透明背景的视频播放器？该视频保存为.mov扩展名（唯一支持透明背景的扩展名）。

使用了react-native-player但只呈现了黑屏。

尝试使用https://www.w3schools.com/html/mov_bbb.mp4，本地加载和通过URI加载都可以工作。

目标平台：iOS。

- Gogumania

我也有同样的问题，你找到解决方法了吗？ - Chris

我在 iOS 上也遇到了同样的问题，在 Android 上我可以设置背景颜色。 - Luis Suarez

透明PNG可能是您最好的选择。如果图形是基于矢量的，则建议使用Lottie，它允许您从After Affects导出为SVG（JSON），以便在移动应用程序或Web应用程序中使用：https://airbnb.io/lottie/#/ - Ed Barahona

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mehmet Fatih Yıldız · Accepted Answer

我需要同样的东西，尝试了许多不同的方法，我的结论是透明电影文件并不是一种被接受的实践/标准。只有苹果快速时间支持它。

以下是我尝试过的一些解决方法，并在很多性能挑战中部分地使其工作。

最好的工作方法是导出所有mov帧（使用任何可接受的帧速率 - 对我而言，我正在尝试呈现将要导出为gif的内容，因此即使15 fps对我也有效）。将电影帧导出为透明png格式。Ffmpeg可以轻松完成这个任务。

然后，使用简单的循环从js代码中加载和更新帧。这仍然非常具有挑战性，因为从jsbundle中在图像视图中加载每个帧根本无法满足您的帧速率需求。就我个人的经验而言，我只看到了从jsbundle加载资源时低于单数的帧速率。另一方面，有一个解决方案。您可以将png文件放在ios / xcode的xcassets中，并将可绘制对象放在android中。然后使用{uri：'filename'}从原生应用程序加载资源。对于我来说，在iOS上，即使在1080p质量下的20-30秒视频长度中，这产生了非常好的质量和速度。不幸的是，这遭受了内存问题，在Android上无法工作-Android仅为我处理了100多个帧。如果您的电影总共有150-200个帧以上，无论fps如何，它都会达到内存限制。我花了一周以上的时间研究克服内存问题的替代方法，将许多大型位图加载到内存中以便在应用程序中顺序显示它们。虽然有理论方法可以在Android上利用内存而没有堆大小限制，但我发现它太底层并且超出了我的Android / Java知识范围。

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

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

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