Autoplay on HTML5 / iPad

[Joe]

I have set my code to autoplay my sound clip on page load. This plays fine in Firefox but when I visit the page on an iPad which uses the HTML5 method, the sound clip does not automatically play. I have to do this manually. What am I doing wrong?

A test is on: http://www.joesmalley.com/clients/agitprop/bruichladdich/sound/sound.html

[Joe]

Here's my code:

$(document).ready(function() {
	
	 $("#jquery_jplayer_1").jPlayer({
	  ready: function () {
	   $(this).jPlayer("setMedia", {
		mp3: "sea.mp3",
		oga: "sea.ogg"
		}).jPlayer("play"); // Attempts to Auto-Play the media
	  },
	  ended: function() { // The $.jPlayer.event.ended event
		$(this).jPlayer("play"); // Repeat the media
	  },
	  swfPath: "",
	  supplied: "mp3, oga"
	 });
	
	
	});

[PAJ]

I know that autoplay does not work on the iPhone, you must start the stream manually, So I detect for the iPhone and display a message instructing the user to "click the play button..." Looks like it is the same with the iPad.

[Joe]

Ok, but I would really like to play the sound automatically if possible. I tried adding this code:

     if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
             alert("Hello Apple device!");
           $("#jquery_jplayer_1").jPlayer("play");
     }

On my iPhone I get the alert message appearing, but the next line doesn't play the sound. Did I write this line of code correctly? Is there no way of instructing an Apple device to play the sound on page load?

[Kb]

This is a restriction in IOS itself for very reasonable reasons

From Apple "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. This means the JavaScript play() and load() methods are
also inactive until the user initiates playback, unless the play() or
load() method is triggered by user action. In other words, a user-
initiated Play button works, but an onLoad="play()" event does not."

[Joe]

Ahh I see. That's a shame.

One more thing - when viewing on an iPad / iPhone I see a grey/black Quicktime player. Is it possible to hide this?

[Mark Panaghiston]

jPlayer 2.0.0 will need the CSS for the jPlayer div to be set to zero size. Do not hide it!
Make its width and height 0px.

The jPlayer patches from jPlayer 2.0.3 on will do this automatically, since the size is defined by a constructor option since the CSS cannot be used to define the size reliably, such as using "100%" ends up causing the computed value in pixels to be used... Which is wrong.

[Joe]

Great, thanks for the info Mark.