I am new to react native and I have a problem where I need to play 2 videos on top of each other, one of them is a transparent video and the other is a normal video. So starting from there, I would like to play the original video and than on top of that play the transparent video, both videos should be synced with each other. Does someone know if that is possible or not. Thank you
#EkremAy thank you for your feedback but I think you should double check your answer, because videos with aplha channel exist, they have .webm or .mov extensions (not sure for other extensions, but I'm 100% sure that .mp4 files to not support transparent videos), also you can check this link for a reference.
I got a demo working on ReactJs where I have a .mp4 video and .webm video and everything works as it should (I will attach the code below), I will try to implement it on React Native and if I find a solution for react native as well I will edit this question so someone else might use it.
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;
If the background of the video is green(like green screen), this color can be removed to make it appear transparent. If you can emulate this process on react-native, you can play videos on top of each other but it is quite difficult to implement.
For an easier start, you can put videos in 2 different <View>s and change their size and opacity settings. It's not exactly what you imagined, but it will show you where to focus.
Related
I have an HTML5 Video embedded in a web view. When it starts playing, the sound of other apps in the background like Spotify will pause. But when it plays muted the background app sounds will not pause. Is there any way to play the background apps sound while the web view video plays?
I want the html5 player to have a mixWithOthers option like mix or duck which is the same as react-native-video.
My current Web view code
<WebView
allowsInlineMediaPlayback
mediaPlaybackRequiresUserAction={true}
allowsFullscreenVideo={false}
source={{html: player(videoId, controls, muted)}}
ref={ref}
onMessage={onBridgeMessage}
scalesPageToFit={scalesPageToFit}
onNavigationStateChange={(a) => { console.log("onNavigationStateChange", a?.url) }}
/>
portfolio57333.herokuapp.com
Hello,
I just created this page and was trying out something new. I render an animation in blender with a transparent background as a .webm and it displays perfectly fine on every browser but safari. When I tried the render it with quicktime and the video codec as QT rle / Qt Animation for safari, I get a .mov file which wont display at all. Sometimes it would display but it would have a black background instead of transparent on safari.
safari is also hard for me to test on.
<div class="vid-container">
<video id="main-vid" playsinline muted loop autoplay poster="images/earthholo.png">
<source src="video/0001-0250.mov" type='video/mov'>
<source src="video/0001-0250.mov" type='video/quicktime'>
<source src="video/0001-0250.webm" type='video/webm'>
<source src="video/0001-0250.webm" type='video/quicktime'>
</video>
</div>
I tried different variations but got no success in safari.
I have no JavaScript for this and the CSS is only controlling the position and size.
I am using a WebView to play youtube videos but I want to play just the video not show that it is from YouTube. I found another component but it plays only video links ending in mp4. Thank you
Embed and normal urls of Youtube videos are different.
Normal: https://www.youtube.com/watch?v=DGQwd1_dpuc
Embed: https://www.youtube.com/embed/DGQwd1_dpuc
So, you should change 'watch?v=' with '/embed/'.
Also, adding parameters such as 'showinfo=0' or 'controls=0' can help.
Example:
<WebView
style={{ flex: 1 }}
source={{
uri: "https://www.youtube.com/embed/DGQwd1_dpuc?rel=0&autoplay=0&showinfo=0&controls=0",
}}
javaScriptEnabled={true}
/>
But you should know that Youtube logo, title and some ui elements will still be visible.
I am implementing a custom video picker on my app to get videos from users gallery. I found out that if i pass video uri to image component it automatically shows thumbnail for that video.
<Image
...
source={{ uri: this.props.video.uri }}
/>
It is working for 95 percent of videos but some videos -especially ones that i downloaded from internet- just have black thumbnails. Is there a way to prevent this behavior or how can i detect black thumbnails so i can use external library to get thumbnail for that video.
Thanks.
<video muted controls="true" loop id="v" width="100%" height="100%" src="pattern.m4v">
The video plays when I hit it direct on iOS (localhost/patter.m4v) yet it absolutely will NOT play when I hit my index.html. In fact, I can't even get the video to play by tapping on it directly even when visible.
This took way too long to solve for how simple of a problem it is AND how simple the solution was.
Out of all the articles I read, this article on html5 video in webkit helped the most. If my solution does not work for you, I highly encourage you to consult that link as the solution to your problem is likely in there.
Problems
For whatever reason, my <canvas> element was over my <video> element, even if not visually. If this is your problem, there are tricks like position: absolute and/or z-index:999
I needed playinline for my video or it would only play full screen. Note that autoplay and videoElement.play() only work with playinline.
Cliff notes:
Apple relaxed rules on html video in iOS 10
autoplay works in iOS10 (a)
playsinlineworks in iOS10 (a)
Code
<video playsinline muted controls loop autoplay id="v" width="400" height="400" src="pattern.m4v">
a: As long as it abides by the rules listed in the link above (second paragraph)