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
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 am building an iOS/Android app using Cordova and Ionic and I'm in the unfortunate position where I cannot test on a physical iPad and have to rely on the iOS Simulator for testing. It was just made known to me that this app does not play audio through the speakers when headphones are NOT plugged in, like you would expect, but other Cordova (non-Ionic) apps work fine on both speakers and headphones.
I am on: Cordova v5.1.1, and Ionic v1.0.0-beta.9
I am also using this Cordova plugin for native audio:
de.neofonie.cordova.plugin.nativeaudio 3.1.0 "Cordova Native Audio"
The audio works perfectly fine on my Nexus 7, OS X/Windows browsers, and the iOS Simulator (if there is a way to simulate plugging and unplugging headphones, that would be great but I have not found an option like that).
Here is some code for what I am using for audio:
Preloading one of the files:
//First is the name of the file to play
window.plugins.NativeAudio
.preloadSimple(first, 'audio/' + first + '.mp3', function(msg){}, function(msg) {
console.log('NativeAudio error: ' + msg);
});
Playing the file:
window.plugins.NativeAudio.play(id);
The code above works perfectly fine, it's just that the iPad does not seem to want to play out of the speakers for some reason.
Old question, but I just ran into a similar issue on Ionic 3 with the same plugin and ended up here, so I thought maybe this will help someone at some point.
I have found this plugin to play sounds over the speaker only when the phone's mute switch is off.
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 have a website, it works fine on android devices and on iPhone 5 iOS 8.1.
However, on iPhone 5 iOS 6.0 and iPhone 3GS 6.1.6 the video doesn't even play, it shows a play button with a / through it when tested on Safari or Chrome.
I've done some research, and with the iOS 6.0 update comes Safari 6.0.
Knowing this I searched for the point in time when Safari started supporting the HTML5 video tag.. the first version of Safari supporting this is Safari 3.1. according to the apple website, and according to the 'caniuse.com' website, Safari Mobile supports the HTML5 video element from 4.0 onwards...
Source(s):
http://caniuse.com/#feat=video
Code:
<video preload="auto" autoplay="autoplay" loop="loop" id="background">
<source src="background/background1.mp4" type="video/mp4"> </source>
<source src="background/background1.webm" type="video/webm"> </source>
</video>
Safari supports MP4 so technically it should work, and Chrome supports MP4, webm and ogg..
So with Chrome having support since Chrome 4.0 for the HTML5 Video Tag I don't believe that this is the issue, I believe this is driver related.