Getting Autoplay Working on iOS

• Matthew Congrove
• July 29th, 2010 07:55PM
• html5, video, javascript

On smaller devices like iPhone and iPad touch, the movie plays in full screen mode only and automatic playback is disabled so a user action is required to initiate playback.

Those are some pretty strong and clear words from Apple's Safari Web Content Guide. In the Safari HTML5 Audio and Video Guide they also add...

It is especially important to provide user controls on iPad because autoplay is disabled.

With the seemingly end-all-be-all absolute truths being provided by Apple and the nearly 200,000 Google results for "no video autoplay on iphone", most folks would be inclined to give up and accept that they're powerless in having complete control of their videos on iOS devices. I, however, am not one of those folks, and was lucky enough to discover early on that Apple's word isn't necessarily the sum of all knowledge (this specific revelation coming after getting video ads running on iPhone OS within minutes of being told my method was impossible by the Cupertino crowd).

The Discovery

When an unnamed high-profile client recently tapped my department at Brightcove to develop a custom HTML5 video solution with as much parity to their Flash player as possible, I was eager to beat Apple at their own game one more time. With my stubbornness in one hand and skepticism over Apple's claims in the other, I quickly sat down and spent the next three weeks eyes-deep in JavaScript-land.

Initially I was only questioning Apple's claims in areas that others had showed progress in, but as luck would have it, I stumbled across some behavior during development which made me start wondering about autoplay. Within five minutes of frantic code changes and constant Mobile Safari refreshes I had, somehow, managed to actually get autoplay functioning on a crude level. It took a few more hours to understand exactly what code had enabled it, mostly because it was five or six lines buried in nearly 2,000, but when I did finally narrow it down I nearly leapt out of my chair.

Being a self-taught developer with more knowledge in PHP than JavaScript I won't pretend to fully understand why the code works, but in a market that changes on a daily basis results are more important to me than grasping the minute workings of JavaScript.

All-in-all, the autoplay solution is quite simple and a little dirty. Unlike those who had previously circumvented Apple and AT&T's attempts to prevent autoplay by simulating user interaction (tricking the browser into thinking a user clicked on the video), my code has no real rhyme or reason. But it does work. And it works in iOS4.

The Code

First we'll need a video element on our page. It needs to include the usual properties such as a source, a type, a poster, dimensions, and an ID for easy JavaScript manipulation.

<video id="myVideo" poster="http://codeblog.co/pages/movie-trailer.jpg" width="600" height="334" controls>
	<source src="http://codeblog.co/pages/movie-trailer.m4v" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
</video>

Now we can add some JavaScript that executes on window load (to make sure the element is ready); within this we'll retrieve the video element, run the load method, and then play the video. If that sounds simple to you and you're wondering if it's actually more difficult, trust me, it's not.

window.onload = function() {
	var pElement = document.getElementById("myVideo");

	pElement.load();
	pElement.play();
};

And that, my friends, is all. Shocked? So was I.

Demo

You can check out the code in use at the link below. Be sure to visit the page using a device (or simulator) running iOS.

http://codeblog.co/pages/getting-autoplay-working-on-ios.html

If you don't have an iOS device, you can watch the following video:

Wrap-Up

I really hope that you all have enjoyed my long-winded article to arrive at 10 lines of code, and I wish you luck in implementing this work-around within your own projects. I'd also like to note that while I may not fully trust in Apple's guidelines, I still thoroughly appreciate their assistance during the HTML5 video surge, and hope they don't take too much offense to my attempts at ignoring their implementation limitations and suggestions.

Update

Thanks to Ryan for pointing out that there's no need for the timeouts for basic usage. It should be noted that when running more intense scripts (with complete custom controls and a large code base) it might be necessary.