I am working on a video platform where we have a webapp and have the requirement for having an app downloadable from the stores - for which we are using a hybrid app approach by wrapping the webapp using IONIC CLI.
Autoplay is something most browsers do not support i.e. a user click must be registered before autplaying video.
Is it possible for a hybrid app to access native video player so that the video player can autoplay videos? How can I solve this issue to bypass autoplay restrictions when the app is installed as a hybrid app?
Thank you.
You can make the video autoplay by muting the video on ionic.
<video inViewport
playsinline loop
[muted]="'muted'" preload="auto" muted="muted"
id="video1" class="video-media">
<source src="{{chosenVideoHolder}}" type="video/mp4">
</video>
TS file to unmute when user click on the video:
public changeVideoAudio(id: string) {
let vid: any = document.getElementById('video1');
vid.muted = !vid.muted;
}
Related
I have some .ogg audio files hosted on cloud and wanted to play in a audio player. The next code works fine on Android but not in iOS:
<audio controls controlsList="nodownload">
<source src="<ogg_audio_url>" type="audio/ogg" />
</audio>
I'm using Ionic 5 with Capacitor. I tried to use some Cordova plugins, convert the file to base64, but no success. From what I've read in some forums, iOS does not support playback of audios in ogg format, requiring specific applications, is there any way to do this in an Ionic way, using a cordova plugin or similar?
Thanks in advance.
Try to use native audio plugin for better compatibility.
https://ionicframework.com/docs/native/native-audio
Most threads relating to similar problems are years out of date. I'd be extremely grateful if anyone can shine a light here.
A small, 20 second video on my website is running into problems which seem inconsistent in the iOS environment. I've searched every technical forum I can find and not been able to find a solution. The video works perfectly on any other O/S (Windows; Android; Amazon Fire; etc).
These are my test results with iOS devices:-
iPhone with iOS 13.6 - YES it runs ok.
iPad with iOS 9.3.6 - YES it runs (iPad too old to be updated further).
iPad Mini with iOS 13.6 - NO on any browser.
iMac with iOS 10.15.6 - Safari NO; Chrome YES Firefox YES.
This is my code (I'm using Bootstrap 4 framework for the site):-
<div class="embed-responsive embed-responsive-4by3">
<video class="video-background" controls="true" controlsList="nodownload" playsinline>
<source src="videos/logoVid265.mp4" type="video/mp4">
<source src="videos/logoVid.webm" type='video/webm;codecs="vp8, vorbis"'>
Your browser does not support the video tag.
</video>
</div>
The .mp4 is H.265 encoded but I've also tried H.264 encoding with the same result.
The video in the web page in the link in the comments appears not to play on Safari on an iPAD running iOS 13.4.1, while playing fine on Safari on am MAC.
However, if you extract the video URL and paste it into a new tab on the same Browser on the same iPAD it plays properly, so the video itself is not the issue.
Digging deeper, it is actually the class in the containing div which is causing the issue:
<div class="embed-responsive embed-responsive-4by3">
<video controls="true" playsinline="true" class="">
<!-- <video width="520" height="360" controls controlsList="nodownload"> -->
<source src="videos/logoVid.mp4" type="video/mp4">
<source src="videos/logoVid.webm" type="video/webm;codecs="vp8, vorbis"">
Your browser does not support the video tag.
</video>
</div>
If you remove this class the video will play on the original website on the same browser and device.
Going a little bit deeper again, if you just remove the 'overflow=hidden' or the 'position=relative" attribute in this style then the video will play.
You will likely want to investigate and experiment a bit further but it is possible the problem is simply that the video element or the controls are being masked by another layer on your page. Either way, the video itself is playing fine.
As a note, in case it is of interest, investigating this type of issue is much easier if you have access to a Mac you can connect your iOS device to. You can then use the web inspector in the Mac's Safari developer tools to inspect web pages on the the iOS device.
You do need to go into the settings on iOS and set this - at the time of writing this is at:
iOS device -> settings -> safari - advanced -> 'Web Inspector' (enable this)
When you connect the iOS device to your Mac and open Safari you should see an option under the 'Develop' tab to connect to the device (you may need to enable developer options in Safari if you have not already):
i try to get the html5 audio working on ios with cordova.
<audio controls>
<source [src]="attachment.audioUrl" type="audio/mpeg">
</audio>
Working fine on Android or on all Web Browsers using ionic serve (Safari/Chrome, no problem). But get stuck on ios. Audiofile is played just once and during playback it says "Live broadcast". When finished, there is no way to get this file play another time but close the view and go back works fine.
Could this be an cordova issue or am I doing something wrong? I already tried different audio types and made sure, that they are correctly formatted. All working on other platforms but ios.
I am using cordova 8.0.0
and ionic 3.20.0
Thanks,
Karsten
I'm am trying to build a simple music app using meteor as my framework. I'm using html5 audio tags as my player. Everything works and displays completely fine in my browser but when testing on the iOS simulator all i get is a black screen with a giant gray play button that does not work.
I'm wondering if this is a meteor problem or if iOS limitations are too robust in order for the html5 audio player to display correctly.
If anyone knows the solution to this please help.
Thanks
I had the same issues with the html5 video element. I will share my findings for that as it sounds like the same issue for the audio tag.
iOS web app and Cordova
For iOS just add “webkit-playsinline” next to your audio tag as done below for video:
<video webkit-playsinline>
<source src="mySource.mp4" type="video/mp4">
</video>
Cordova
For a Meteor Cordova iOS app you also need to add the following to mobile-config.js to set the cordova config.xml settings:
App.setPreference('AllowInlineMediaPlayback', true);
You can read up some more about this on http://blog.blairvanderhoof.com/post/78586868260/getting-the-html5-video-tag-to-work-in-cordova-for
If that does not work you can go with the following cordova plugin which supports audio playback: http://plugins.cordova.io/#/package/org.apache.cordova.media
Example from the plugin docs:
var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")
myMedia.play({ numberOfLoops: 2 })
Hope it helps.
Regards,
Riaan
HTML5 Audio is not supported on most mobile devices. Check out the documentation at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio for more information. iOS does not support a lot of the new HTML5 Media elements and APIs at this point. The only mobile browser that supports HTML5 audio is Firefox Mobile. Hope this helps!
I've recently run into an issue when embedding a video with standard iframe embed code and adding autoplay=1 like this:
<iframe width="420" height="315" src="http://www.youtube.com/embed/Le4kjAIcj4k?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
The results when testing:
autoplay works both on desktop and mobile if the Flash-version of the
player is loaded (if Flash is present & no HTML5-beta participation cookie is present)
it works in the HTML5-version on the Desktop as well
but does not autoplay in the HTML5 mobile version (tested on Android
4.1.2 with both Firefox Mobile and Chrome on this page, on Android you need to make sure you don't have flash).
Is this a known issue? Any workaround?
When you use the <iframe> Player in a browser that has Flash disabled, playback is handled via HTML5 <video> tags.
Apple explicitly prohibits autoplaying media in <video> tags in iOS Safari.
This is also the case for at least recent versions the default Android Browser or in Chrome. I'd strongly suspect that Android Firefox has the same restriction.