I am developing an HTML5 Audio Web & Mobile App.
I am preloading audio by starting the preload after clicking on a "start" button, in order to elude the autopreload block in mobile device.
But the preaload always stops at a certain point.
I wonder if there is a weight limit in HTML5 audio contents on Mobile Browsers.
I am Using Safari Mobile on Iphone and Ipad (also emulators on Mac have the same behaviour).
Debugging with Developer Tools, i don'r receive any alert / error.
When i try load a single mp3 file ointing the file url ( www.mysite.com/audio.mp3 ) i receive an alert on the browser console: Nework Error. Isn't this strange?
Related
I used Simple Peer(WebRTC), ReactJS for my video call service. In the video call screen, I used 2 video tags(contact video and user video) for video playback. When the call gets started after a successful connection, only the contact video is getting played(1st video tag) and when the contact turns off their video user video is getting played(2nd video tag).
This only happens on Safari(I only tested on Mac). It works fine in other browsers(Google Chrome, Firefox).
Is there a way to fix this issue?
WebRTC depends a lot on browsers and Safari has specific requirements (like strict order of tracks). Check JS console to identify any errors.
You can experiment with a turnkey html5 videocall solution that works and try to replicate.
Android Chrome V(50.0.2661.89) has webRTC support. So i'm trying to set up Webrtc call between Mobile chrome browser and Desktop. All works good. But on Android mobile (Samsung S4, all event few more brands). audio output is coming on both Ear piece and External speaker. I could not control the output audio to playback only on Ear piece. Like normal mobile calls.
<audio> tag has ability to set playback device id by using this HTMLMediaElement.setSinkId(sinkId).then(function() { ... }) but in mobile chrome its not enabled.
If it try to get all media devices. it gives only 1 kind audio output as default. I know this possible in native android app, But did anyone succeed in getting this playback control on mobile browser? Please post your comments if you have any idea on this.
I've attached by mobile chrome console for reference.
I created a website for preview of HTML5 video autoplay, but it is not working on iPhone and Android 4+. Can anyone please let me know how can i make it work?
As of iOS 6.1, it is no longer possible to auto-play videos on the iPad.
My assumption as to why they've disabled the auto-play feature?
Well, as many device owners have data usage/bandwidth limits on their devices, I think Apple felt that the user themselves should decide when they initiate bandwidth usage.
After a bit of research I found the following extract in the Apple documentation in regard to auto-play on iOS devices to confirm my assumption:
"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.
In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.
Here is a separate warning featured on the Safari HTML5 Reference page about why embedded media cannot be played in Safari on iOS:
Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.
What this means (in terms of code) is that Javascript's play() and load() methods are inactive until the user initiates playback, unless the play() or load() method is triggered by user action (e.g. a click event).
Basically, a user-initiated play button works, but an onLoad="play()" event does not.
For example, this would play the movie:
<input type="button" value="Play" onclick="document.myMovie.play()">
Whereas the following would do nothing on iOS:
<body onload="document.myMovie.play()">
Source taken from :
Can you autoplay HTML5 videos on the iPad?
but as for android,
here you go
http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
I am trying to play audio after a touch on my website using audio element but the audio file is on aws cloud front. The audio is audible on Desktop Chrome but I cannot hear it on iOS Safari .
Do they permit it , if yes then is there a config file that we need to create ?
To answer your titled question: yes mobile Safari does allow to play cross domain HTML5 audio (just tested it again on my iOS7 iPad). Though there has been report it is not working well with CORS attribute.
You could try to wildcard CORS on CloudFront. Maybe this can help you.
Are you able to plug your iOS device on a Mac to use Safari debug console for iOS? If so there could be error showing up in the logs.
While testing the HTML audio tag, I came across two problems with mobile browsers. First, the "autoplay" attribute does not always function, so that the user needs to touch the "start" button on the screen. Second, a 1:09 recording, cuts off at about one minute with some browsers, but plays to completion with others. An example of the first problem is that autoplay works as it should using the Google Chrome browser on my desktop, but not on my Android (HTC EVO) mobile phone. An example of the second problem is that the mobile Chrome browser plays the audio file to completion on my phone, but the default browser that came with my phone cuts off about 8 seconds prematurely. The autoplay feature, however, works as it should on the "default" browser.
Are these problems caused by reduced functionality and memory when going from a desk or laptop environment to a smartphone environment?
Don't know about Android, but iOS has well-known limitations on HTML5 audio and video. Apple claims they are designed to save data charges, even though they apply even when you are on WiFi, or the assets are local as in an e-book.
The limitations include no preloading until some user interaction occurs, no looping, no inline replay on iPhone, no change of playback rate, no playing backwards, no volume control, etc. etc. See http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/ for a good summary.