Jem Jem - 11 months ago 84
iOS Question

Can you autoplay HTML5 videos on the iPad?


attribute works fine in Safari.

When testing on an iPad, the video must be activated manually.

I thought it was a loading issue, so I ran a loop checking for the status of the media:

videoPlay: function(){
var me = this;
console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
if ($("#periscopevideo").get(0).readyState != 4){
setTimeout(function(){me.videoPlay();}, 300);
else {

The state remains at
on the iPad. On my desktop safari, it goes through
and finally
On the iPad, it only reaches
if I manually tap the "play" arrow.

Moreover, calling
from an click via
works too.

Is there any restrictions by Apple in regard to autoplay? (I'm running iOS 5+ by the way).

Answer Source

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="">

Whereas the following would do nothing on iOS:

<body onload="">