Can you autoplay HTML5 videos on the iPad?

Asked 19/9, 2012 at 13:48 Answered 6/10, 2022 at 10:46

Solved jquery ios objective-c html cocoa-touch

125

The <video> tags autoplay="autoplay" 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 {
      $("#periscopevideo").get(0).play();
    }
}

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

Moreover, calling $("#periscopevideo").get(0).play() from an click via onClick works too.

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

Bonham answered 19/9, 2012 at 13:48 Comment(5)

Related/duplicates: #2842466, #4260428 – Anglesey 19/9, 2012 at 13:54

Maybe we should look at browser detection, and whether or not you should call playVideo(): #26895992 – Merge 12/11, 2014 at 20:3

This work for me github.com/Stanko/html-canvas-video-player – Serrulate 17/5, 2016 at 8:27

Useful blogpost on this topic: webkit.org/blog/6784/new-video-policies-for-ios – Tetter 29/8, 2017 at 9:22

opera mini in ios supports autoplay by default, while chrome, firefox and safari does not and have not offering options to turn on. – Conation 7/5, 2018 at 12:59

160

iOS 10 update

The ban on autoplay has been lifted as of iOS 10 - but with some restrictions (e.g. A can be autoplayed if there is no audio track).

To see a full list of these restrictions, see the official docs: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 and before

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="document.myMovie.play()">

Whereas the following would do nothing on iOS:

<body onload="document.myMovie.play()">

Sharkskin answered 19/9, 2012 at 13:50 Comment(15)

Hmmm 3 months of creating an online alarm clock for iPhone Safari down the drain! We (sleep.fm) figured out a way to keep phone awake while app is open but now with iOS 6.1 the alarm audio wont play. It worked fine in iOS 6.0. Is there a work around? – Goldberg 31/1, 2013 at 3:22

oh wait we got our mobile web alarm clock (sleep.fm) for iPhone Safari up and running again, so there are work arounds for the lack of html5 autoplay support. – Goldberg 27/2, 2013 at 1:24

@Jonah1289 According to your blog post on Sleep.fm Brian Cavalier Tweeted a github link with the following title Autoplay audio on the ipad or iphone using webkitaudiocontext instead of audio tag Might be a good place to start. – Lynden 21/5, 2013 at 11:55

More details, please -- what specific workarounds exist for the lack of Autoplay support? – Postilion 10/1, 2014 at 20:23

Although there seems to be an exception to the rule.. If you visit YouTube in Safari on the iPad and click on a video it starts playing automatically. So is this just because of the relationship and rights between Apple and Google/YouTube? – Coign 14/1, 2014 at 16:49

@Coign Nope, my answer is in relation to autoplaying a video with no user interaction at all - no clicks, swipes etc. Clicking on a video which then autoplays involves user interaction. I don't think Apple would want to give Google any special privileges anyway considering their bitter rivalry. – Sharkskin 14/1, 2014 at 16:59

@user3237539 Sorry I mean click on a video for example from the YouTube homepage. You're then taken to video page as expected, but the video starts playing automatically from there. You do not have to click on the actual video to start playing it. – Coign 14/1, 2014 at 17:29

@Coign Interesting. I've just found two questions asking this exact thing - here and here, but there doesn't seem to be any answers. You may want to bounty one of them to try and get an answer to that. – Sharkskin 14/1, 2014 at 17:49

What they should do is allow autoplay when on wifi, and either have manual play or prompt the user that the video wants to autoplay when on a mobile network. – Physiotherapy 18/2, 2014 at 10:49

How can I autoplay on iOS 6 and earlier. As you are saying that it is not possible on iOS 6.1 and later. – Throes 20/6, 2014 at 8:45

Am i geeting this right, that all those play() and pasue() js command ain't going to work until the user initiates playback once, than everything is back on track. Or am i mistaken and those not-triggered-manually play()'s now will never work on iOS 6.1+ ? – Highcolored 3/12, 2014 at 22:26

@SinnerSmile It will work but needs to be user-initiated first. – Sharkskin 3/12, 2014 at 22:40

Does user-initiatet include scrolling? – Jilli 22/9, 2015 at 16:20

With iOS 10 it should be possible – Bayberry 5/10, 2016 at 9:43

What about Android ? – Aa 16/5, 2017 at 21:42

I want to start by saying by saying that I realize this question is old and already has an accepted answer; but, as an unfortunate internet user that used this question as a means to end only to be proven wrong shortly after (but not before I upset my client a little) I want to add my thoughts and suggestions.

While @DSG and @Giona are correct, and there is nothing wrong with their answers, there is a creative mechanism you can employ to "get around," so to speak, this limitation. That is not say that I'm condoning circumvention of this feature, quite the contrary, but just some mechanisms so that a user still "feels" as if a video or audio file is "auto playing."

The quick work around is hide a video tag somewhere on the mobile page, since I built a responsive site I only do this for smaller screens. The video tag (HTML and jQuery examples):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

With that hidden on the page, when a user "clicks" to watch a movie (still user interaction, there is no way to get around that requirement) instead of navigating to a secondary watch page I load the hidden video. This mainly works because the media tag isn't really used but instead promoted to a Quicktime instance so having a visible video element isn't necessary at all. In the handler for "click" (or "touchend" on mobile).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

And viola. As far as UX goes, a user clicks on a video to play and Quicktime opens playing the video they chose. This remains within the limitation that videos can only be played via user action so I'm not forcing data on anyone who isn't deciding to watch a video with this service. I discovered this when trying to figure out how exactly Youtube pulled this off with their mobile which is essentially some really nice Javascript page building and fancy element hiding like in the case of the video tag.

tl;dr Here is a somewhat "workaround" to try and create an "autoplay" UX feature on iOS devices without going above and beyond Apple's limitations and still having users decide if they want to watch a video (or audio most likey, though I've not tested) themselves without having one just loaded without their permission.

Also, to the person who commented that is from sleep.fm, this still unfortunately would not have been a solution to your issues which is time based audio play back.

I hope someone finds this information useful, it would have saved me a week of bad news delivery to a client that was adamant that they have this feature and I was glad to find a way to deliver it in the end.

EDIT

Further finding indicate the above workaround is for iPhone/iPod devices only. The iPad plays video in Safari before it's been full screened so you'll need some mechanism to resize the video on click before playing or else you'll end up with audio and no video.

Holdall answered 12/11, 2013 at 6:1 Comment(1)

It would be better to use $dummyVideo.get(0) instead of brackets, so jQuery can gracefully fail if your selection is empty. – Accident 3/12, 2014 at 14:46

Just set

webView.mediaPlaybackRequiresUserAction = NO;

The autoplay works for me on iOS.

Croton answered 15/11, 2013 at 3:27 Comment(6)

This doesn't work for a website, this only works for sites where you've wrapped them with a Native application. – Holdall 21/11, 2013 at 15:46

I mean, from a webpage (as the question is asking) this is something completely inaccessible - yes, Javascript in a browser cannot do this. This only works if you running your site inside of a WebView from an application you have control of so it doesn't really provide a solution to the question. – Holdall 12/12, 2013 at 16:37

@izuriel to be fair, he did tag the question with "objective-c" and "cocoa-touch", so it's not THAT far-fetched to assume he's using a webview – Blastogenesis 4/3, 2014 at 9:37

@Blastogenesis Tags are usually added as a means to get more attention or a general misunderstanding of the problem they're trying to solve. The person asking the question may have thought that mentioning objective-c was the same as saying "iOS" (and similar for cocoa-touch). The "uiwebview" tag is not listed though so I'd exclude that as a viable option. The question mentions the usage of Safari on desktop and iPad (nothing about an app) and uses Javascript demo codes to debug the situation. All in all I'd say it's more of a safe bet this question was really looking for web not native solutions. – Holdall 4/3, 2014 at 17:26

On Android: developer.android.com/reference/android/webkit/… – Bushwhack 29/7, 2014 at 12:41

Thanks, this helped me as I was using WKWebView – Repugnant 8/8, 2016 at 1:46

As of iOS 10, videos now can autoplay, but only if they are either muted, or have no audio track. Yay!

In short:

<video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
- <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
- <video muted> elements will also be allowed to autoplay without a user gesture.
- If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
- <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
- <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

More info here: https://webkit.org/blog/6784/new-video-policies-for-ios/

Silin answered 29/9, 2016 at 18:54 Comment(1)

autoplay attribute just works on PC, not working on mobile. I have tried many times. – Clarance 9/6, 2017 at 1:59

In this Safari HTML5 reference, you can read

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.

Perennate answered 19/9, 2012 at 13:51 Comment(2)

"apart from GIF files which can be multiple MB and use bandwidth without people even realizing" – Carbuncle 20/3, 2015 at 16:54

@Carbuncle x12 times for most of the times to be precise. – Heft 1/2, 2017 at 11:44

Let video muted first to ensure autoplay in ios, then unmute it if you want.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

Christalchristalle answered 29/6, 2017 at 13:45 Comment(0)

Safari in macOS and iOS will only work with playsinline attribute.

So if you are trying to play a video inside element with id videoHolder, will have to do as in the following code.

var vid = document.querySelector('#videoHolder');//dom with id of video container
var video = vid.querySelector('video');//the video element

video.setAttribute("playsinline",""); //add attribute playsinline
video.mute(); //mute the video
video.play(); //play the video

Or if you are using html5 video tag use the attribute in tag eg. ref the below html

<video autoplay="autoplay" loop="loop" muted="muted" playsinline="">
<source src="https://yourdomain.com/your_video.mp4" type="video/mp4">
</video>

Woodprint answered 6/10, 2022 at 10:46 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags