<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)
Related
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 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.
I'm trying to get an image capture from the front or back camera of my smartphone using the WebRTC. I used one of WebRTC samples for that. This code works perfectly in browsers on the computer, but on the smartphone with different operating systems (iOS, Android) I get a black screen in the tag <video autoplay></video>. I tried various browsers, in none of them the image capture function worked properly, everywhere a black screen was displayed. What should I do to capture the picture?
I have a http connection, all my smartphones and cameras work fine, so the problem is definitely in WebRTC (or in its use).
For Safari, try adding playsinline to the video element. See this thread for background information.
If that doesn't help you might want to check the mediastream as well as the video elements readyState property.
My design calls for a video playing in the background of my login screen, exactly like 6snap has.
I would like to avoid the default behavior of stopping the user's music when the video starts to play. My video does not have sound.
I'm using:
<MediaElement Source="MyVideo.mp4" />
I tried setting IsMuted=true which didn't help. Does anyone have an idea how 6snap managed it?
Edit: currently trying the animated gif route. Using the ImageTools 3rd party library and having converted my MP4, it works fine. My 9 second 640x1136 3MB video became a 41MB GIF, so I have to reduce the quality drastically. Still trying to find a better way if possible.
You won't be able to do that with Background Audio and MediaElement, hence as MSDN says:
When a MediaElement control plays audio or video content, any background sounds or media already playing are halted. The app launches the playback experience when the user taps the control. Only one MediaElement control can operate at a time.
It's no matter you have no sound - when you start to play all background sounds/media are halted.
I'm not sure how the App you have mentioned achieved that, but maybe you can try with DirectX/XNA - thought I've not tried this and don't know if that would help.
I'm working on a page that has a list of houses for sale. Each listing has a short video with the option of watching in the page or full screen.
I'm struggling a little with having the videos on the page at one resolution and the fullscreen at a higher resolution - this is needed especially for devices that automatically go fullscreen when the play icon is pressed.
I've had good results with video.js (http://www.videojs.com/) for the page resolution but it doesn't appear to support resolution change on fullscreen. I found this thread with comments about the HTML spec and changing resolution mid-stream: https://github.com/videojs/video.js/pull/233.
I'm told the embedded Youtube player selects the correct resolution automatically but the branded player makes this a non-starter.
Also I've found that in IE10 without Flash that the embedded Vimeo player doesn't function and in Chrome without Flash the Vimeo and Youtube players fail as well... so much for HTML5!
So anyone have a solution for showing video at the correct resolution (low/high) for the state of the player (contained/fullscreen)?
Your question answered a query of mine. It looks like auto switching resolution is still not implemented in videoJS other than for YouTube videos. There is a demo at videoJS Resolution Switcher and you can see in the console that changing window resolution to full screen has no effect.
I've been using the JWPlayer for several years with no problems at all. It reliably supports auto switching has many features and very good support.