Autoplay HTML5 audio/video in iOS5

Question

I have an HTML5 web-app that has sound effects. I'm trying to get these effects working in iOS5 and can't for the life of me.

Wondering if anyone has any work-arounds to get JS control of an HTML5 audio/video control in iOS5.

Or even a way to control multiple audio files with one click. As it stands right now, if I have 10 sound effects, I'd need 10 user clicks to get control of all of them, which is absurd!

Apple does not allow autoplay on there iOS's as far as I know, it has to be initiated by a user click, also you can only play one file at a time for video and probably same for audio — ryuutatsuo, Nov 08 '11 at 05:47
I can overlay sound tracks just fine, I just need permission for each one to do so... — , Nov 08 '11 at 13:51
Just as @andrewh mentioned it is user activated, so why don't you overlay a transparent div over your entire app which when the user touches you remove and activate your audio, this way it was a user interaction. This is more of a hack. Or trigger the audios by any other button you might have in your app that requires clicking — ryuutatsuo, Nov 08 '11 at 15:23
don't need to overlay anything, I can catch clicks up to `document.body`. Part of the issue comes in that I can only activate ONE audio file per click, so the user would need to click 10 times if I want control over 10 sound effects. — , Nov 08 '11 at 16:57

score 7 · Accepted Answer · answered Nov 08 '11 at 06:26

Absurb, but you have to see it from iPhone or any mobile phone's point of view. It is a mobile phone going over a cellular network with bandwidth limitations, which many people know about from the recent Sprint commercial. They do not want users going over their bandwidth limit because some site is sending their phone a large amount of data without them taking action themselves.

The following is an excerpt from the official Safari Developer Library with more details.

User Control of Downloads Over Cellular Networks

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.

This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">

This does nothing on iOS: <body onLoad="document.myMovie.play()">

A bit belated, but this means there's no solution? – dragonx May 01 '13 at 16:20 — dragonx, May 01 '13 at 16:20

score 6 · Answer 2 · answered Apr 22 '12 at 17:36

Due to Apple, they have restricted the auto-play features to prevent cell data charges. In xcode4 i added a workaround though. In your "webViewDidFinishLoad" Send a javascript call to auto play the video and it works. I tried this in the html file with regular javascript but it did not work. Doing it through webViewDidFinishLoad did the trick though. In this example i want to auto play the video on my index.html page. I have a javascript function on that page called startVideo().

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    NSURLRequest* request = [webView request];
    NSString *page = [request.URL lastPathComponent];
    if ([page isEqualToString:@"index.html"]){
        NSString *js = @"startVideo();";
        [myWebMain stringByEvaluatingJavaScriptFromString:js];
    }
}

And here's my javascript function:

<script>
function startVideo(){
var pElement3 = document.getElementById('myVideo');
pElement3.play();
}
</script>

And here's the html in case you're new to html video

<video id="myVideo" poster="index_poster.png" width="1024" height="768" xcontrols     autoplay="autoplay">
<source src="flow.m4v" type="video/mp4"/>
browser not supports the video
</video>

score 0 · Answer 3 · answered Nov 08 '11 at 17:52

0

Have you tried something like this??

function clickedOnce(){
  $('audio').each(function(){
      this.play();
  });
}

answered Nov 08 '11 at 17:52

ryuutatsuo

3,924
3
27
29

yep :) Only one of them works. The others get ignored. My code is now something like: `var files = $('audio');...clickFn(){ files.pop().play(); }` to get control of each file... – Nov 08 '11 at 17:56
Yea I was just able to check on the Ipad and it only plays one :( – ryuutatsuo Nov 08 '11 at 18:02
can you post more of your code I might need this in the future as well. Thanks – ryuutatsuo Nov 08 '11 at 18:03

Autoplay HTML5 audio/video in iOS5

3 Answers3

Linked