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

问题描述 投票:5回答:1

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

使用过的react-native-player,但仅呈现后屏幕。

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

平台目标:iOs

reactjs react-native video mobile react-native-ios
1个回答
0
投票

我需要相同的东西,并尝试了许多不同的方法,但我的结论是透明的电影文件不是公认的惯例/标准。仅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上分别尝试了大多数这些解决方案,而这两个平台都有其自身的问题。

© www.soinside.com 2019 - 2024. All rights reserved.