如何在React-native中实现具有透明背景的视频播放器？视频以扩展名.mov保存（仅发现支持透明背景的扩展名）。
使用react-native-player但它只渲染一个后屏幕。
尝试使用本地和通过uri加载的https://www.w3schools.com/html/mov_bbb.mp4并且它有效。
平台目标：iOs
答案 0 :(得分：1)
我需要同样的东西，并尝试了许多不同的方法，但我的结论是透明的电影文件不是公认的惯例/标准。只有apple quicktime支持它。
以下是我尝试过的一些变通办法，使其部分解决了许多性能挑战。
最好的工作方法是导出所有mov帧（以您可以接受的任何帧速率-对我来说，我试图渲染要导出为gif的内容，因此即使15 fps也对我有效）。将电影帧导出为透明png。 Ffmpeg可以轻松做到这一点。
然后通过js代码简单循环，加载和更新框架。这仍然非常具有挑战性，因为从jsbundle加载图像视图中的每个帧根本无法满足您的帧速率需求。据我的经验，从jsbundle加载资源时，我只看到低个位数的帧速率。另一方面，对此有解决方案。您可以将png文件放入ios / xcode中的xcassets中，并在android中放入drawables。然后使用{uri：'filename'}从本机应用程序加载资源。这为我在iOS上提供了非常好的质量和速度，即使在1080p的质量下播放20-30秒的视频时也是如此。不幸的是，这遇到了内存问题，在Android上不起作用-Android仅为我处理了100帧帧。如果影片的总帧数超过150-200帧（无论fps大小如何），它将达到存储限制。我花了一个多星期的时间来研究解决内存问题的替代方法，在内存中加载许多大型位图，以便在应用程序中顺序显示它们。有理论上的方法可以在没有堆大小限制的情况下在android上利用内存，但是我发现它的级别太低，超出了我的android / java知识。
我尝试的另一条没有成功的方法是webM格式。它是Google的webp格式，支持一定的推送功能，但是我找不到关于webm播放的在线资源。我成功播放了一个webm文件，但是它就像gif播放器一样工作，几乎所有的播放器都没有清晰的方法来支持透明的gif动画。因此，我也无法通过webp / m来获得解决方案。
现在，我试图用视频中的其他RN动画元素伪造视频的透明部分。
顺便说一句，我分别在iOS和Android上分别尝试了大多数这些解决方案，而这两个平台都有各自的问题。