Apple Disabled Audio/Video Playback in HTML5

While putting together an HTML5 prototype for a client, we ran into an unexpected hurdle:

Apple has disabled programmatic playback of audio and video in HTML5. Essentially, the only way a webpage can play audio or video for a user, is if that user clicks a play button.

This works:

<a href="javascript:audio.play()">Play</a>

This doesn’t:

<script>
setTimeout("audio.play()", 1000);
</script>

Despite all of Apple’s statements about being pro web standards, they have crippled HTML5 as an App platform. Here is their reasoning:

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 autoplay are disabled. No data is loaded until the user initiates it.
Source

Even though they state autoplay is disabled, all JavaScript initiated play() calls are ignored in MobileSafari.

That reasoning is hogwash. Two out of the three iOS devices are sold wifi only (iPad & iPod Touch). This business decision (not a technical one, mind you) completely eliminates an entire class of web applications. Those that would mimic native Apps found in the Apple App Store.

Awesome HTML5 Games like: Bio Lab and HTML5 game engines like: Impact are now useless on iOS. A simple thing like making a click sound when a user touches a button and playing background audio at the same time will not work.

While desperately searching for workarounds, I’ve found a few possible solutions. However, as of iOS 4.2.1, even these are now all disabled by Apple. There has been surprisingly little noise about this. I suspect that it has flown under the radar so far.

Technical Details

I spent quite a bit of time hunting down possible workarounds. Here is what I found (applies to both audio and video):

  1. MobileSafari will initiate a audiotag.load() inline when audiotag.play() is called without audiotag.load() called first.
  2. MobileSafari will not allow audiotag.load() to be called by asynchronous javascript. (i.e., not initiated by a user action.)
  3. You must call audiotag.load() then audiotag.play() on MobileSafari. Because load() has to be user initiated, we must call load() on every audio track that will be played in the current chapter. (A.K.A., preloading)
  4. Preloading using existing methods does not work because MobileSafari does not send onload events. We must listen to the progress event to determine an asset as loaded. (Platform specific workaround)
  5. MobileSafari will give a “stalled” event when trying to preload a second audio track after the first is loaded. It will not load the second track. Calls to play() on this track will fail silently. (Likely, this is a memory issue. MobileSafari is working with 256 MB of memory, it probably can’t hold more than a few tracks in memory and, thus, will not allow more than one audio/video track loaded. We would typically just not preload the audio tracks. However, because of #2, we are now in Game Over Man)

As a last resort, I created a shell iPad App that had a single UIWebView. You can use these properties:

UIWebView.allowsInlineMediaPlayback = YES;
UIWebView.mediaPlaybackRequiresUserAction = NO;

This will allow you to work around the issue. But, hey, we are no longer an HTML5 app available online now are we?

About the author

Mike Wille - I'm the head techie here with a passion and hunger for all things digital. I got into programming because I love to create and couldn't cut a straight line in wood shop.

29 Responses to "Apple Disabled Audio/Video Playback in HTML5"

  1. I ended up writing a pretty similar piece on the problem, because this problem is seriously damaging my app’s functionality. This is just intentional crippling of HTML5 and it makes me wonder about the future of the HTML5 implementation. It seems the browser vendors can still do whatever they like even though the API and logic are carefully spec’d by W3C already. One workaround I thought might be handy is that it seems once you load and click play on a player instance, it’s good for the rest of the session in iOS4.3 even for async, so you can create a few channels using a number of differently id’d audio tags and link them to load some content during the UI stage of the app where the user’s doing clicking. From then on those activated channels can be used for load and play events until the page is refreshed. I’m working that angle at the moment – so it’s a dire situation. I hope they bring full HTML5 compatibility back to iOS – this fork is tragically flawed and there are SO much better ways to handle actual warnings of data usage for userland without alienating web app developers.

  2. It doesnt surprise me. Apple wanted to cripple the web by not allowing Flash to protect there Mobile App Store. In my opinion the mobile games that are on the iPhone basically look like many Flash games that are already out. Apple knew this, so the solution was to block Flash from the iPhone.

    So they sent out a bunch of things that at the time might have been partly true about Flash, but now Flash is running on millions of Android devices.

    And now, they see how far HTML5 can really go, so I believe they do this on purpose just make it so native apps are slightly better — its a tactict to twist the arm of the developer to learn Objective-C.

    I prefer using skills I already have so something like Phonegap or even Flash CS5 is preferred. I also don’t want to invest in a Mac when i already have a shiny PC.

    Since you wrote this, has apple changed it?

  3. Darn, i have spent a lot of money and time on developtment of my first web app, until today in found about this crippled html 5 funct. I am really disapointed. My app is not the same with out this… (its a game..imagine!). I. Have stopped production and i am scratching my head on what to do now. Before i started developing i checked if the sound functions whe incorporatd, and i saw that they where, never thoughgt they where crippled.

    Aghh. Now what :(

  4. Yeah, that’s a total bummer.
    I’m trying to build a proof of concept for a simple 8-note piano. So I actually got to avoid the issue you describe — since I’m calling the audio’s play() method from within a touch event handler.
    However, I then ran into a different show stopper: MobileSafari is able to play just one sample at a time. So the piano can’t have polyphony; the sustain/decay of one note gets cut-off when you play the next note. Similarly, if you’re working on a game, then you can’t have sound effects layered on top of music.

  5. Least to say, I’m not surprised. Google is doing the same with Chrome, those companies only talk about standards to attract new developers and at the same time only work on their own version of the technology.

    Google and Apple don’t care about you: they don’t want billions of websites. They only want their sites / webapps to work. Not yours. And if you could help them by removing flash first, they would be happy. One more step to a total control.

    I think it’s time now to ask ourselves who worked on campaigns such as occupyflash, and wonder who really benefits from all that.

  6. Hi,
    Not surprised at all but it’s so fast!
    Really these companies only care about themselves even Adobe (which gave up on flash), I don’t know how we can kill or control these companies ? who has a clue?

  7. Flash and Flex have been fully open sourced and are now Apache projects. Now we just need people to ask for Flash in every browser as a temporary measure until HTML5 is ready IMHO…

  8. I totally agree with you guys. Apple is using the divide and conquer mechanism against all of us. Blame Flash and support HMTL5. Flash is out. Now HTML5 to go… It is the same as in dictatorship , communism. They want the cake all for themselves. They`re also very good at marketing we should say this. Flex 4ever!

  9. @stef. Why u say google is doing the same with chrome? I think google is totally diferent from apple.

  10. Is this permanent or temporary ?

  11. @tahir it looks like it is permanent. The Apple docs say that it is done to prevent data charges from the carriers. I disagree with that, but it certainly looks like it is here to stay.

  12. So now, all you flash / flex haters finally see it. Apple was doing this to kill web apps. We had flex for this. Now we have nothing.

  13. The weirdest thing about all that is @occupyflash. Who the hell are those guys? CNNMoney called them “a small handful of independent Web developers”. Have you ever seen a group of developers stating anonymously that a technology should die?? Why would anyone do that?

  14. I’ve been banging my head trying to figure out why my app wouldn’t work on the iPhone. I had a feeling it was something with .play() being called by a script but wasn’t sure how to tell for sure.

    This saved me from banging my head for a much longer time.

    Thank you!

  15. This is very disapointing … I was adding sound on my new HTML5/Js game, it was looking OK on Chrome desktop and I tried it on my phone … nothing. I tried some workarounds but it seems that it will be tricky to put sound effects in html5 games on mobile devices … That’s bad news !

  16. The only workaround, perhaps, is using a silent sound before the actual sound should play..

  17. Interesting… but…

    I can play audio on my PhoneGap WebApp on iOS…

    its true that no autoplay or preload… but metadata works(if my mind dont fail)… you can do some autoplay placing a script on Body load or using some timer to play(jquery provides interesting stuff)

    the problem with this is that there is no backgroud(if you exit from your the app to do another stuff) audio play if you have it inside and app… well, no with phonegap… no without modifiying phonegap :(

  18. Hey Guys,

    I ran across the idea of using an audio sprite file, which has all your game audio sounds in one file separated by a brief silence. You load this single audio file on the first play button click and then seek to the required audio clip.

    You still cannot play overlapping tracks, but this restores some of the sound functionality for a game. I guess some is better than none.

    Apple has done a similar thing with the html input file element, which is unsupported in Safari mobile, requiring the use of a native app for online file uploading.

    HTML 5 is looking like 2 steps forward, one step back.

    If these companies have there way, you won’t even be able to even visit any sites but their’s soon. I find it absolutely amazing people now have these amazing mobile tools which give access to all the knowledge in the world, and these companies would have you forced to watch mind numbing television and commercials.

    Mr Hayman

  19. In addition to
    webview.allowsInlineMediaPlayback = YES;

    …there is also one other thing that might help “webkit-playsinline”

    as described here:
    http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

  20. Darko, I believe this works for playback of embedded content within a webpage (versus going fullscreen). But it still does not allow javascript to initiate playback. The end user must still press play first.

  21. I’ve just hit this problem. I could wrap my page in an app for now, using UIWebView, but I wanted to confirm whether or not issue 5 applies to UIWebView. I would like to preload a load of mp3s to ensure I can have lag-free playback. Also, is it possible to play multiple sounds simultaneously in UIWebView?

    Just asking before I go to the effort of packing up an app to test it!

  22. Tom: It is not possible to play multiple sounds at once, unfortunately. You could probably go old school and play a midi soundtrack in the background with a single mp3 at a time for sound effects. Though, I’m not sure on that at all :)

    For #5, just use the two configuration properties on UIWebView to make loading by javascript available:

    UIWebView.allowsInlineMediaPlayback = YES;
    UIWebView.mediaPlaybackRequiresUserAction = NO;

  23. On my 3rd-gen iPad running IOS 6, autoplay of HTML5 tags has suddenly begun working! (I’ve had IOS 6 installed for a couple of weeks, and am pretty sure I tested this feature right away, but only noticed it working tonight.) I don’t recall seeing any notice of this from Apple, although I did see that mobile Safari had been granted the ability to support file uploads via
    form input type=”file”
    – another feature I needed but which Apple had withheld.

  24. @dkurland
    We use web audio api and we ALSO see autoplay suddenly work on iPad3. We saw it work a few weeks ago. Then it stopped working. Yesterday it didn’t work and now today it works again.
    Is Apple trying to drive us mad?
    OR can we count on this to continue to work into the future?
    Who can tell?

  25. Thanks Mike, your solution is working for me.

  26. I developed this web based media player in 1999 when desperately trying to learn how to use web pages to access and update data. I have not used any other media player since, where my music and music videos are concerned. Why Apple would spoil the fun of learning to be developers is beyond me!

    http://www.ipi-international.co.uk/media/IPI%20Apple%20Media.htm

Trackbacks/Pingbacks

Do you have something to say?

Your email is never published nor shared.
Required fields are marked *