我是新的React本地和我有一个问题,我需要播放2个视频在对方的顶部,其中一个是透明的视频,另一个是正常的视频。所以从那里开始,我想播放原始视频,然后在播放透明视频的顶部,两个视频应该彼此同步。有人知道这是否可能。谢谢
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;
ilmyapht2#
如果视频的背景是绿色的(像绿屏一样),这个颜色可以被移除,使它看起来透明。如果你可以在react-native上模拟这个过程,你可以在彼此之上播放视频,但这是相当困难的实现。一开始你可以把视频放进两个不同的<View>中,然后改变它们的大小和opacity设置,这和你想象的不太一样,但是它会告诉你聚焦的位置。
<View>
opacity
2条答案
按热度按时间oymdgrw71#
@EkremAy感谢您的反馈,但我认为您应该仔细检查您的答案,因为aplha频道的视频存在,它们有.webm或.mov扩展名(不确定其他扩展名,但我100%确定.mp4文件不支持透明视频),您也可以检查此link作为参考。
我有一个在ReactJs上工作的演示,我有一个.mp4视频和.webm视频,一切都正常工作(我将在下面附上代码),我将尝试在React Native上实现它,如果我也找到了react native的解决方案,我将编辑这个问题,以便其他人可以使用它。
ilmyapht2#
如果视频的背景是绿色的(像绿屏一样),这个颜色可以被移除,使它看起来透明。如果你可以在react-native上模拟这个过程,你可以在彼此之上播放视频,但这是相当困难的实现。
一开始你可以把视频放进两个不同的
<View>
中,然后改变它们的大小和opacity
设置,这和你想象的不太一样,但是它会告诉你聚焦的位置。