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.
Related
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.
<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)
I'm can't get youtube videos to display with the correct height on iOS 7.1, ipad mini, even in the most simple test case. Here's an iframe embed taken directly from the youtube site:
<iframe width="300" height="169" src="//www.youtube.com/embed/8vZqjg-9gTg" frameborder="0" allowfullscreen></iframe>
When displayed on my ipad min (ios7.1), the height is not calculated correctly. It appears as though the control bar might have something to do with it... the height seems to be off by the height of the control bar (or close to it).
Here's a test page: http://codepen.io/anon/pen/tnIsC/
I'm using video.js and sequence.js together.
In IE, the flash fallback works and plays the video, but if you enter fullscreen the controls won't work anymore.
This is where I'm having the issue:
http://sandbox.israel-rn.info/axaTRES/modulo9.html
Currently I am working on a web app for mobile devices where I am using javascript events to move the focus from one contenteditable div to another. On most mobile devices, everything is fine and the keyboard does not hide. I have tested this on android firefox and chrome, and on iOS5 and iOS6 safari. On iOS6 safari I have found that moving focus from one div to another will close the keyboard and not change focus, instead of keeping the keyboard displayed like on all other browsers.
For example, if I have
<div contenteditable="true" id="1">Stuff</div>
<div contenteditable="true" id="2">Things</div>
and
$("#1").on("keydown", function() {
$("#2").focus();
});
$("#2").on("keydown", function() {
$("#1").focus();
});
then I would expect to alternately be typing characters in each div, which is what happens on most mobile browsers except for iOS6 safari.
You can find a simplified example at a JSfiddle I made at http://jsfiddle.net/8jj56/2/
How can I get the same kind of keyboard behavior for iOS6?