React Native透明视频

gkl3eglg  于 2023-03-31  发布在  React
关注(0)|答案(2)|浏览(244)

我是新的React本地和我有一个问题,我需要播放2个视频在对方的顶部,其中一个是透明的视频,另一个是正常的视频。所以从那里开始,我想播放原始视频,然后在播放透明视频的顶部,两个视频应该彼此同步。有人知道这是否可能。谢谢

oymdgrw7

oymdgrw71#

@EkremAy感谢您的反馈,但我认为您应该仔细检查您的答案,因为aplha频道的视频存在,它们有.webm或.mov扩展名(不确定其他扩展名,但我100%确定.mp4文件不支持透明视频),您也可以检查此link作为参考。
我有一个在ReactJs上工作的演示,我有一个.mp4视频和.webm视频,一切都正常工作(我将在下面附上代码),我将尝试在React Native上实现它,如果我也找到了react native的解决方案,我将编辑这个问题,以便其他人可以使用它。

import video from './assets/counter.mp4'
import alpha from './assets/alpha.webm'

const VideoDemo = () => {
  return (
    <div>
      <p>Transparent video on top a video DEMO</p>
      <video height="700" width="1000" muted autoPlay controls style={{ zIndex: '-1', position: 'absolute'}}>
        <source src={video} type="video/mp4"/>
      
      </video>
      <video height="600" width="1000" muted autoPlay controls = '' >
          <source src={alpha}type="video/webm"/>
        </video>
    </div>
  );
}

export default VideoDemo;
ilmyapht

ilmyapht2#

如果视频的背景是绿色的(像绿屏一样),这个颜色可以被移除,使它看起来透明。如果你可以在react-native上模拟这个过程,你可以在彼此之上播放视频,但这是相当困难的实现。
一开始你可以把视频放进两个不同的<View>中,然后改变它们的大小和opacity设置,这和你想象的不太一样,但是它会告诉你聚焦的位置。

相关问题