I'm using the HTML5 video tag to get a video playing in my ionic app. Here's my code:
<video autoplay loop class="video" webkit-playsinline>
<source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
<source src="videos/polina.webm" type="video/webm">
</video>
The video autoplays fine, however the video opens up into the native player and doesn't play inline. After some research I came to understand that webkit-playsinline should solve this issue, at least on iOS, but this doesn't seem to be the case for me testing on iOS8&9.
I tried videogular and I'm still getting the blasted native player appearing.
I even paid a little bit to get this code here: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video that illustrates exactly what I am trying to create (a background video on my login screen) but still the video opens up into the native player.
Has anyone managed to get a video to play inline on their ionic/phonegap app? If so how?
The reason why is the UIWebView was not configured to allow inline video playback. On iPads it is defaulted to allow it, but on iPhones it is not.
You can easily allow this by adding this to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
The UIWebView should then respect the webkit-playsinline attribute.
Also the code will work on most Android devices as well (especially if you add the Crosswalk plugin). However you should put the webm first, then the mp4 file to avoid problems with some versions of Chrome).
You should also add a poster="firstFrame.jpg" to the video tag so that you get an image while the video gets ready to play. The jpg should be the first frame of the video (use whatever video editor you like to extract it).
See this site for a much more complete example (and free...). I have used this on Android / iOS with Cordova with minimal changes. The changes needed were load the files into the project, use CrossWalk for Android, remove the media selector in the css (it stops video on small screens by design, but it works ok in Cordova), add the playsinline attribute, and finally add in the preference in the config.xml.
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
Related
I have an Angular 5 app.
I have the same video element (tiny video of 10 seconds at the server root for testing), with the same source on my route 1 and on my route 2.
I can't make things work properly.
Here's my HTML video element :
<video width="400" controls>
<source src="test.mp4" type="video/mp4"> Your browser does not support HTML5 video.
</video>
Can't do easier, right ?
When I visit for the first time my webapp, on my first route loaded (either route 1 or route 2, I tried both), all caches clean, my video doesn't have cover. When I click on play :
In the best case, the video is playing for a 2 seconds and then, the image freeze, sound is cut, the playing seeker goes at the end of video time. The end screen is green.
OR
Most of the time, the video is not playing
If I navigate to my other route, video is not playing when I click on play. If I refresh my page, same action same result.
I tried to use a basic HTML page with just the same video tag. My video is playing as expected. At the first visit, and when I refresh. So, I assume that I don't have the byte-range requests issue.
It's working as expected in all others platforms tested (Safari/ Chrome macOS, Chrome iOS, Chrome Android).
Issue is encoutered on iPad Mini 4 with iOS 11.3.
I read a lot of things about Safari iOS issues with HTML5 video. I tried to apply several fixes without success, but anyway, posts readed don't really have the exact same problem : in their case, video wasn't playing at all.
Moreover, it's working with the same code outside Angular, so I guess it's not that problem is not about my video tag.
I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:
Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too
Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9
Does playsinline attribute help?
Here's what I have:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/
iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.
Here is the little hack to overcome all the struggles you have for video autoplay in a website:
Check video is playing or not.
Trigger video play on event like body click or touch.
Note: Some browsers don't let videos to autoplay unless the user interacts with the device.
So scripts to check whether video is playing is:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
And then you can simply autoplay the video by attaching event listeners to the body:
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.
You can see the working example with code here at this link:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.
Using dangerouslySetInnerHtml to embed the <video> code. For example:
<div dangerouslySetInnerHTML={{ __html: `
<video class="video-js" playsinline autoplay loop muted>
<source src="../video_path.mp4" type="video/mp4"/>
</video>`}}
/>
Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb
Also, thanks to #boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)
I had the same problem - the video not play on iOS. I tried all the code options "playsinline autoplay loop muted". The problem was the video I received was in the wrong mp4 codec. So what helped us, was to upload the video to Vimeo and download the HD Version again. The video is now playing on all mobile devices.
You could also try to use mpeg streamclip. Here is a screenclip of VLC - those are the correct settings. Hope someone does not have to spend 2 hours searching for the problem - happy holidays
Here is a simple solution to auto-play the video in IOS, I've already tried and it is perfectly working on IOS, Android, also on all the browsers on various platforms.
simply use (data-wf-ignore) and (data-object-fit) Attributes for the video and data-wf-ignore for the source tag..
You can see the working example with code here at this Snippet:
<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>
Pretty incredible since I thought all videos expanded to play fullscreen in regular safari. Check this out for example:
https://entertainment.theonion.com/the-onion-reviews-rogue-one-1819596116
That video plays inline and doesn't even stop when I switch Safari tabs. What's happening there? Are they using js and HTML5 canvas to render the video or something? How do they sync the sound so well?
Just constructing an answer based on the link #offbeatmammal posted in his comment.
Also based on new video policies for ios specifically that:
On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
A note about the playsinline attribute:
this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.
Lastly an example:
<video autoplay loop muted playsinline>
<source src="image.mp4">
<source src="image.webm" onerror="fallback(parentNode)">
<img src="image.gif">
</video>
with a fall back that displays an image on video error
function fallback(video)
{
var img = video.querySelector('img');
if (img)
video.parentNode.replaceChild(img, video);
}
I want to use video player technique used in my website. I use html 5 videos in website and send normal URL to app so that they can be played using the native MPMoviePlayerController inside the app. Now I have requirements where I want to use the same technique as web inside the app as UIWebView. When I request the link to load, it opens up the default player view of iOS, which I want to avoid.
Can this be possible?
No, this is not possible. Not in the Safari browser. Videos will always be played by the native player. Trust me, I've spent a lot of time on this.
If you build a Phonegap app, it is possible by what is mentioned here:
HTML5 inline video on iPhone vs iPad/Browser
Basically:
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
i created a small website that includes a video with this code:
<video autoplay="autoplay">
<source src="inc/WEB_MASTER.mp4" type="video/mp4">
<source src="inc/WEB_MASTER_ios.m4v" type="video/mp4">
Your browser does not support the video tag.
</video>
When i load the page via my iPhone the video starts playing, but it does not play it in the part of the website, instead the iphone plays the video in fullscreen. How can i force the iphone to play the video in the respective area on the website?
Thanks.
The iPhone and iPod seem just about the only devices/browsers that force fullscreen video playback in Safari (and in apps that make use of its unmodified WebView)
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video inline and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
This question is answered here:
HTML5 inline video on iPhone vs iPad/Browser
Just add the webkit-playsinline attribute to the video tag. Works in iOS 4.0 and later:
<video id="player" width="120" height="60" webkit-playsinline>
Here is the official documentation for webkit-playsinline.