This post is deprecated since this technique doesn’t work with the new iOS 4. But here’s a blog post by Matthew Congrove that get’s it working. I tested his technique with iOS4 and it looks good.
I previously wrote a post mentioning how you can’t use autoplay on the iPad. After further investigation it turns out autoplay is in fact possible on the iPad AND iPhone. First, here’s the background. If you try to use the autoplay attribute for the video tag it won’t work in Mobile Safari. This was intentionally disabled by Apple (and for good reason). The Safari Reference Library states:
In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript
play()andload()methods are also inactive until the user initiates playback, unless theplay()method is triggered by user action.
So it turns out the trick to get around this is to make the browser “think” that the user initiated an event. To do this you need to create a fake link, bind the play to the click event, and then dispatch the link’s event. Here’s a link to an example of this technique in action (note, this example is only intended to work on Mobile Safari), view-source to see the JS:
http://www.roblaplaca.com/examples/html5AutoPlay/
And now for the disclaimer: Apple prevented autoplay for a reason so it’s best not to abuse this technique for your user’s sake. Also since this technique is a hack there’s always the possibility that this won’t work in future releases.
Tags: autoplay, dispatchEvent, html5, iPad, iPhone, javscript, tricks, video
Nice!
This does work on the iPad when viewed through the safari browser, but I’m having trouble getting it to work through UIWebView in the iPad simulator. The user still has to initiate playback before any javascript methods will work on the video.
Comment by wRust — May 27, 2010 @ 2:55 pm
Great workaround !
@wRust it is working in UIWebView.Open the demo URL within a UIWebView and you’ll see.
I had a hard time to make it work with local resources. It obviously refused to load a local .js file. Although when you can paste all the code you need (including the jquery), it works !
Comment by Bobi — June 3, 2010 @ 8:13 am
I was really excited when I saw this run in Safari, but so very disappointed when I saw that on the iPhone it still launches the MoviePlayer instead of playing inline. Hey, but it did autoplay! I guess Apple doesn’t let us have that.
Comment by Donald Hughes — June 7, 2010 @ 2:22 pm
It looks like this workaround is broken on the iPhone with OS4.
I have a hard time buying the official line about how this was done for the user’s benefit. If it was why is there no option to change the behavior when connected via wifi (or for the millions of customers with unlimited data plans). I suspect the real reason is that this behavior cripples competing music streaming services (like the late lala.com).
Comment by 320 — June 22, 2010 @ 11:07 am
I don’t mind using html5 for development on apple’s devices, but thy are really annoying me by saying flash sucks. I try to use html5 and it’s nowhere near as powerful as flash. to top it off apple strips away the ability to really create great apps by being big brother and deciding what they think is best for the users.
give me the whole of html5 not some stripped down version of it.
Steve Jobs needs to stop being evil before he can point the finger at adobe and say their mantra is BS!
Comment by candytunes.com — June 30, 2010 @ 1:55 pm
Thanks for the post. I’ll try to build this into VideoJS.
Comment by VideoJS — August 6, 2010 @ 9:57 pm