iPad and iPhone html5 video autoplay

This post is deprecated since this technique doesn’t work  anymore! 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() and load() methods are also inactive until the user initiates playback, unless the play() 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.

You may also like...

  • http://www.williamrust.com wRust

    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.

  • http://www.news.bg Bobi

    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 !

  • Donald Hughes

    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.

  • 320

    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).

  • http://www.candytunes.com candytunes.com

    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!

  • http://videojs.com VideoJS

    Thanks for the post. I’ll try to build this into VideoJS.

  • http://www.wickeddeveloper.com Luiz Lopes

    I was able to autoplay video on iPad iOS 3.2.2 by calling the load method on a video element, on document ready, using jQuery.

    var video = document.getElementById(‘movie’);
    // run this on document ready
    $(function(){
    video.load();
    });

  • Amit

    HI thanks for this amazing post

    BuT ..still a question..for Iphone 4 its all right..but do u have something to let this happen on 3or less version..currently i m using embed tag for them…but still wont autoplay…
    any code to let same thing happen with embed tag…
    ..
    thanks in advance

  • Dude

    No longer works on iOS 4.2.1…

  • Rob

    @Dude – Did you try out Matthew Congrove’s technique that I highlighted at the top of the post? I haven’t tested it yet with the new iOS, but it’s an alternate technique that may work.

  • Tom Pepper

    No joy with either method, I’m afraid, Rob. I’m investigating what level of trickery is required to do another js sneak attack.

  • Rob

    Thanks for the update. I’ll have to tinker with it over the break. I’ll post if I find anything

  • Pete

    I can understand Apple’s reasoning behind this but there will be situations where the user has already consented to the open the media before they get to view the video so this restriction is annoying. Surely they could have this as an option in Safari settings – autoplay on/off. I’ll check back soon to see if anyone has a work around.

    • Huge

      ESPN has figured it out.
      http://m.espn.go.com
      Scroll down and click a video.
      Video starts to auto play in both Android & IOS. How do they do this?

  • Rob

    100% agree, especially on the iPad where most people use it on wifi. They should at least enable it for that.

  • http://www.unpackideas.com Sohel Zaman

    Hey dude,
    both of the methods are not working on new iOS. May be apple already blocked that leak. Any other way to make this happen?

    I was trying to build a site with a video as background that will play auto and in loop. And FINALLY this should be viewable on iPad browser.

    Thanks in advance. Take care.

    — Sohel Zaman

    • http://mccartneymultimedia.com Christian

      Hi Sohel,

      I have been trying to accomplish the same thing as you, using an HTML 5 video as a background to a website that autoplays when the site loads.

      Have you been able to get this to work yet?

      Thanks in advance!

  • http://www.WideEyedVision.com Tudor

    Really frustrated about getting the video to automatically close and return to webpage once it has been played. Any suggestions?

    Thanks

  • http://mccartneymultimedia.com Christian

    Has anyone been able to get an HTML5 video to autoplay with the video being a background of the website? Sohel have you been able to accomplish this? I have been trying to accomplish the same thing you describe in your post above.

  • Douglas Rhiner

    Apple is playing games here. There have been work-arounds for the autoplay issue that worked with earlier versions of iOS and have since been “cleaned up” by Apple. This shows that having this feature available threatens some position of theirs, in the grand scheme of things. It takes effort to write-out as it does to write-in.

    So why not have a opt-in system for video auto play. Similar, in operation and “location” within the settings interface of iOS, to the “Fetch new Data” dialogue. This would take care of the posited argument of “mobile users being hit by unwarranted band-with charges due to video autoplay”. This is exactly what is being addressed by “Fetch new Data” settings.

    The only reason I can logically think of here with all of the info I’ve been able to glean on the subject is that video autoplay is the only arguable point within the whole HTML5-CSS-JS framework that can keep the iOS App at any form of advantage, by Apple excluding its functionality.

  • http://www.marklong.ie Mark Long

    Have just come across this ‘autoplay’ conversation and found it very helpful as I was struggling to understand this restriction. I am building my website on the lowly iWeb software as I am a video designer not web. When my home page loads on iPhone4 the background video clips display a ‘play’ button which obscures the thumbnail image. I can accept that IOS4 will not autoplay but is there any way for me to prevent the ‘play’ button issue? Thank you in advance, Mark.

  • http://www.newcontent.com.br Pedro Xudré

    Good night folks,

    I have found a simple solution, from 4.x above, Apple has defined the allowsInlineMediaPlayback and mediaPlaybackRequiresUserAction properties do UIWebView, soh only have to set YES and NO, respectively. Thus works if you are building HTML5 embed applications. Pleased if I helped someone.

    Farewell,

  • cmcclain

    Pedro: Your solution sounds very promising, but not sure how to implement it. Unfortunately, I know nothing about Objective-C and am in the process of developing a portfolio app with PhoneGap. I have come across a solution of creating a UIwebView shell to house the PhoneGap app, again, not sure how to implement this. Any help would be greatly appreciated! Cheers.

    • Vijay Santhanam

      I had this autoplayback problem but the person that suggested

      webView.allowsInlineMediaPlayback = YES;
      webView.mediaPlaybackRequiresUserAction = NO;

      worked perfectly for me on 4.3.3 iPad

  • http://www.techcon.co.th Jirawat Akkanit

    Put this code to where your webView.m located.

    webView.allowsInlineMediaPlayback = YES;
    webView.mediaPlaybackRequiresUserAction = NO;

    Dan
    http://www.techcon.co.th

  • industrycaptain

    hi Dan. Where would the webView.m be located? Thanks.

  • Jason

    This solution:

    webView.allowsInlineMediaPlayback = YES;
    webView.mediaPlaybackRequiresUserAction = NO;

    is only a solution if you’re building an app, correct (this looks like code that would be added to files within Xcode)? If one is simply designing a web page using HTML5, Mobile Safari still won’t allow AutoPlay. Or am I mistaken?

    • Rob

      Correct. Apparently it was a similar problem in apps. The post itself is about mobile Safari. I haven’t heard of a workaround since the last batch of hacks got fixed by Apple. I would assume since they keep breaking the workarounds they really don’t want you doing autoplay.

  • http://www.mindskate.com Mindskate

    I had been trying to find a solution to this problem for a long time, so thanks Pedro! It works for me on 4.3.3
    webView.allowsInlineMediaPlayback = YES;
    webView.mediaPlaybackRequiresUserAction = NO;
    Has anyone tested it on iOS 5?

  • http://www.avantic.fr Ludovic condette

    Options :
    webView.allowsInlineMediaPlayback = YES;
    webView.mediaPlaybackRequiresUserAction = NO;

    -> yes, it works for me too on 4.3, will check on ipad 5.0

    but i think it’ll be ok

  • Jake Gamboa

    Hey guys I am using xcode and nimblekit
    where can i find the webview.m ? I really need to autoplay the audio.
    Thanks

  • Devy

    Tried the link in the post:

    http://www.roblaplaca.com/examples/html5AutoPlay/

    DID NOT work in original iPad running iOS 5.0.1. What gives?

  • Rob

    This fix stopped working in iOS4, and hasn’t resume working in ANY newer versions. The problem I outlined involves using HTML5 video in Mobile Safari, apparently it was an issue with App development as well, which I can’t speak to. But for App development there seems to be a workaround.

    My recommendation is to NOT use autoplay. There have been a few hacks to get it to work in the past, however, Apple seems to squash any workarounds with subsequent releases of iOS because they don’t want you to do it in Mobile Safari.

  • Devy

    Thanks Rob!

  • Rob

    They just link directly to the video, and it autoplays. This is fine because it’s just piggy-backing the browser behavior.

    I think many people want to initiate video with NO user interaction. For example, have a video playing on page load on the iPad. That is the kind of interaction Apple doesn’t want to happen.

  • freakqnc

    Then the state of the iOS/safari as it relates to videos and autoplay is that Apple has completely rendered useless the HTML5 autoplay attribute of the video element altogether, instead off giving users the ability to set a preference where they could uncheck the default behavior of autoplay within Safari, or make such preference behave differently according to the connection detected by the OS and therefore set different defaults to apply when connected via wifi (always autoplay) or when on wireless data (autoplay default = never). This behavior hardcoded in iOS, effectively prevents web designers to specify autoplaying content which despite what Apple thinks it should be, it’s not always helpful and often creates unnecessary issues and limitations that disrupt user experience. Besides that was the only way to swap animated flash content with a short video animation and now we’re back serving animated gif or static jpegs instead… Is that Apple-retro attempt to make the web go back in time to the web of the ’90s? ;P

    Wow… how can Apple not suck these days when? They can de-facto rewrite and trump web standard when they please and as they see fit, because of the closed environment they created for their products. I guess that’s further expression of how they really have gone form “think different” (which was ages ago) to “All you base are belong to us!”.

    Should anyone find a fix/workaround, that would be much appreciated! In the meantime thanks to Rob and all others who are putting their efforts in finding way to make things usable again despite Apple boycotting developers and web designers alike. Thanks guys! :)

  • drew

    First Apple disables flash motivating us to html5. Then they cripple html5 in favor of ultra competitive anti open source practices. Apple was going down hill due to alienating developers. History repeats. Iphone will lose market share to Android. At least Google stole the linux kernel and kept it pretty open. Apples steals the linux kernel and closes everything. Webkit should stop supporting Safari.

  • http://qrilize.com jesper

    I think I found a solution for autoplay

    Try to scan the QR code here
    http://stackoverflow.com/questions/8276202/autoplay-audio-with-ios-5-mobile-safari-any-workarounds-left

    /jesper

  • Rob

    Youtube has autoplay. How do they do it?

  • http://www.chann3lz.com Kiernan

    Flash, but ipad doesn’t have flash.. I think apple is un American, they offer only freedoms that benefit them, I’m strongly considering getting a android pad just to get access to things I can’t on the ipad, I have a feeling that eventually Apple will lose their user experience war..and will have to revert to giving users more control, but I wouldn’t hold my breath.

  • james licong

    thank you finally i found the solution in my problem in automatic playing of audio

  • james licong

    thank you finally i found the solution in my problem in automatic playing of audio