I'm having a small web app, which plays really short sound bits on the click of several buttons. It explicitly targets mobile Safari on iOS (iPad).
After reading here and elsewhere about the several "shortcomings" of HTML5 audio in this context on mobile Safari and trying a few "hacks" and tricks, I'm stuck with a situation where Safari seems simply (for the lack of a better word) broken:
I can play sound A (it takes a long time for it to start — I'm assuming it's downlading [again]?) on the click of button A. After that, clicking on button B will immediately play the sound A again. Same for button C. In some cases it will play a different sound, sometimes even the right one. But mostly sound A. The format in use was .aiff, is now .m4a .
After writing a few tiny versions myself, I decided to go with the Buzz library to handle the sound loading/playing/etc..
Funnily enough, their demo includes a game, which does pretty much exactly what I need and triggers the same faulty behavior. I even ended up in a situation where any audio player in mobile Safari in any tab would play a certain sound out of the Buzz demo game (!).
I was hoping a cache manifest might help overcome Apples preloading limitations and force the app to play the sound right after hitting the button in offline mode. But after confirming that the whole app had been cached, I can't play/hear any sound in offline mode.
Has anyone managed to get something like this to work somehow? (— Having seen how Apple handles certain things, I' don't expect much response, though… )
Update 1:
The example in this answer causes the same effect: How to synthesize audio using HTML5/Javascript on iPad
Update 2:
Updating iOS (and so Safari) seems to resolve the audio bug. The cache manifest doesn't seem to effect audio files, though. These files are just not available at all.
After removing the cache manifest the app works okay, but adding it to the "home screen" and reloading it prevents the audio from playing as well.
I wish I could tell you there's a magic formula to get all your html5 media to work perfectly, but there isn't. Mobile support for HTML5 audio/video is pretty poor right now; much further behind than its desktop predecesors. To make matters worse, each of the different platforms handle it differently and most of them only support it in semi-recent versions.
However, there are some tricks you can employ to get media files to work correctly in mobile Safari. In order to explain them, you'll need to understand some of its shortcomings.
1) You can't load multiple audio / video files
Its been my experience that the browser will only load one file at a time. If you play one file, go and play another, and then come back and it'll just load that file all over again. And, although I didn't try it myself, I don't believe a cache manifest will help you here.
What I had to do is combine all my audio files into one large audio file. Then, depending on which audio track was requested, I'd move the play position to the appropriate starting position and play that track. Then, I'd use a setInterval to examine the playback every few milliseconds to determine if the current play position hit the end of the track. Once it did, I paused it. Pluis, I gave myself a few seconds (2-3) between each track, just in case the phone's CPU was under a lot of load and checked the feed a little too late.
2) You can't auto-play audio / video files
Apple built into their HTML5 media tag technology the limitation that these tracks would only load and play in response to a user click event. That way, developers couldn't auto-play annoying tracks when you went to their websites.
When I was using audio/video tags, I was trying to build a rich media advertisement. So I hooked my audio/tracks loading to the banner click event, when you click a banner and expand the advertisement.
What I'd suggest you should do is have a small lightbox popup come up, asking the user if they want to turn on/off sound. You can attach your load functions to the click event of that popup box, regardless if the user turns the sound on or off.
Personally, I didn't have much luck using the load() function. I'd run that function to load the audio and then click play and it would just load it again. It could have always been that I just didn't do it right, so feel free to prove me wrong and get that working. What did is I told the track to play, so that way it would start loading, and then I'd use a setInterval to see if the current play time incremented just a few milliseconds. Once I noticed that it started to play the track, I'd immediately pause it.
3) Audio/Video tags are only supported in iOS 4.0 and higher
There's no trick to getting around this. Its just the facts.
Here's a few sites that helped when when I was developing with audio/video tags:
http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements
Good luck!
Related
The rel parameter in YouTube API dictates whether or not related videos are shown at the end. When rel=0 the video reverts back to the thumbnail with a play button.
However on mobile (tested on iPhone / iPad / Fire Tablet) when the video goes back to the thumbnail it cannot be played a second time. It just does nothing.
I reported the issue to Google but nothing yet after a few days.
I had to resort to destroying the video and recreating it but this makes for a kind of nasty flickering.
My experience with YouTube issues is they never seem to end up fixing anything related to iOS - so I was wondering if there was any other kind of trick to prevent this.
Test page
The trouble with refreshing a webpage at a specific interval is that you dont know exactly when the video ends so you need to develop a method which the video player sends a signal when the video ends, which would then start the script to refresh the page. Otherwise you end up restarting it in the middle of the video. so personally, I would not even mess with refreshing the page. For Audio players it works ok because audio is smaller and streams more quicker. Video dont.... they always stop to buffer.
So YouTube API uses "Events" and "Listeners", so in particular, you need to design around the Event: "onStateChange".
When onStateChange = "ended" (zero) the video has ended, so then you reload the video player with the same video and set it to its Ready State again.
In theory its very easy you basically need to setup and control the entire video player through javascript. And the API gives examples on that.
http://code.google.com/apis/youtube/js_api_reference.html
http://grizzlyweb.com/webmaster/javascripts/refresh.asp
http://code.google.com/apis/youtube/forum/
Have a look at loop and playlist parameters as well. You can set playlist parameter to video ID and same video can be replayed using this.
So, it will be something like:
http://www.youtube.com/embed/{VIDEO_ID}?wmode=opaque&loop=1&version=3&playlist={VIDEO_ID}
Hope this helps!
Appears to have been fixed by YouTube.
I can now play the video multiple times (on multiple devices) without it getting stuck. Was too busy wondering why my question was getting so little attention that I forgot to check again to see if it was fixed ;-)
As many hybrid app developers know, Apple has decided to disallow setting the volume property of HTML5 video elements in JavaScript. This also amounts to the the muted property. The concept of muted videos which autoplay when scrolled into view and with the option of unmuting on tap is growing increasingly popular (pioneered by Vine, Facebook, etc.). I'm trying to find a way around this limitation in design. From what I've been able to read on the subject, there's not any hack or solution that solves this design requirement of mine.
Here's my thoughts so far:
I could split the audio from the video into a separate stream and sync current time with the video and call play() when the user is tapping. However, iOS Safari/UiWebView does not support simultaneous audio/video streams. Thus, this is simply not an option.
I could encode two videos, one with sound and one without. I could then swap the src on tap. However, this requires reloading the entire stream and also nearly doubles the amount of data required. The latency is noticeable. Thus, this won't be a viable solution.
I could embed a native AVPlayer class element in the webview. However, this would be an overlay and not be manageable from within the webview. Custom controls and UI interaction from within the dom would not be possible. Thus, this is not an option.
I could simply disable the output of the app and dynamically switch it on whenever the user taps a video element. However, to my knowledge this is not possible. I could show the native software volume slider, but that would defeat the purpose of this whole thing.
Do you have any suggestions or ways around this limitation?
I managed to find an acceptable solution. I split the videos into three files. One without audio, one without video and then one with both video and audio for desktop browsers/Android.
It seems like running simultaneous streams CAN work as long as they doesn't conflict with each other, which basically means a separate audiotrack and a video with no audio Channels play just fine in unison.
As I keep reading, there is no way to enable HTML5 video autoplay in iOS browsers.
So why does my older iPad (with iOS 8) autoplay this introductory video from e.g., http://www.apple.com/ipad-air-2/ ?
When inspecting this on desktop Chrome, I pause at a certain point and see that a script inserts a <video> element with a mp4 file, then removes it after animation finishes. I've examined their script file as well, but did not find a definite answer to this.
I wish to clarify that I do not initiate any action other than opening the url. I have purposefully avoided every contact (no tapping, touching, etc.).
Could someone with more video experience explain this?
This question has been answered to me in a different place, so if someone stumbles upon this later on...
The short answer is that Apple does not show a video on a device such as iPad. They flash a series of JPEG images like a filmstrip, making it appear as though a video is being played. For a desktop browser, they would show a video file though.
I've been looking into this issue and most sources say that it is not possible to autoplay audio on mobile iOS devices and there is no workaround.
However I have found that elearning software iSpring seems to export html files which do autoplay audio as it goes from one slide to the next:
http://www.ispringsolutions.com/resources/demo/pro/lets-brew-some-hebrew-1/index.html
This happens without any user interaction except the initial click to start the course off.
Looking into the resources I can verify that the mp3 files are separate and not just one long mp3 file with the whole course in it, but I can't figure out what kind of event happens at the end of slide 1 to start off the slide 2 audio.
Is there a way to replicate this effect? We would like to insert this functionality to a course exported in another type of e-learning software.
I've been trying to play more than one sound simultaneously in the iPad browser, and it appears that it isn't possible using raw <audio> tags. Starting one <audio> source will always pause any other playing <audio> sources, whether they were initiated via user tap on the controls, or with the .play() method.
Are there any other approaches that might work for multiple simultaneous sounds (QuickTime, <embed>, etc.)?
Apple have taken a design decision that doesn't allow you to play more than one audio file at a time. It's an intended limitation of the device I'm afraid.
Now that iOS 6 is available, WebAudio is the way to go. This is still not possible in iOS 5.