HTML5 Video autoplay on iPhone

Question

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:

Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too

Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9

You might be able to find some help here: http://stackoverflow.com/questions/41360490/how-to-make-html-video-autoplay-on-phones-and-tablets/ Personally, I have yet to get any video at all to autoplay on an iphone, even after following all those tips and Apples policies. — Mark, Apr 23 '17 at 17:39
It took me hours to figure out. To Try to save hours of everyone else I've summed up my findings in a blog. Hope it helps. https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5 — BoltCoder, Jul 03 '20 at 17:03
Duplicate: https://stackoverflow.com/questions/39259418/html5-video-autoplay-doesnt-work-on-iphone — chickens, Feb 04 '22 at 06:08

score 441 · Answer 1 · edited Mar 16 '20 at 00:56

441

Does playsinline attribute help?

Here's what I have:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/

edited Mar 16 '20 at 00:56

Jee Mok

6,157
8
47
80

answered Jul 30 '17 at 17:26

Pete Florence

4,562
1
10
9

46

`playsinline` worked for me in conjunction with `muted` keeping in mind the low power mode quirk on iPhone – Ken Aug 06 '18 at 14:38
3

`playsinline` Saved the day!!!! Thanks man. BTW, new browser policies demand that if you want to autostart a video, start it muted or you won't be able to do it. +1 to @ken Example for chrome: [https://developers.google.com/web/updates/2017/09/autoplay-policy-changes] – Nuno Prata Nov 07 '18 at 19:07
50

If you're using React, note that the attribute `playsinline` must be written in camelCase: `playsInline`. Otherwise it won't work. – Quentin D Feb 05 '19 at 10:53
1

Don't forget to add muted also with playsinline. playsinline attribute won't work alone without muted attribute – stojkosd Sep 12 '19 at 15:19
1

Yes in React or Gatsby, you need to include both 'playsInline' and 'autoPlay' in camelCase. This is a pro tip that will save you hours and trial and error. – B-Money Jun 15 '21 at 06:11
In vanilla js, for me this doesn't work on iOS :( the video plays for a couple seconds and pauses - it doesn't even play the whole thing to stop before a loop... any ideas? – Matt Aug 30 '21 at 12:12
I used the “`video autoplay loop muted playsinline`” markup and the videos played in Safari for macOS but not in an actual iPhone. It seems that iOS currently does not support WebM format with VP9 codec, which is what we were using. After adding a second source tag with MP4/h264 video, the videos started working (and autoplaying) in iPhones, too. – Otto G May 25 '23 at 14:27

score 127 · Answer 2 · edited Jun 12 '18 at 16:18

127

iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.

edited Jun 12 '18 at 16:18

halfer

19,824
17
99
186

answered Mar 06 '18 at 17:55

Dilip Godhani

2,065
3
18
33

2

great tip but i have a question about this that I submitted : https://stackoverflow.com/questions/50400902/detect-if-ios11-device-is-in-low-power-mode-to-prevent-bad-ux-on-normally-correc – Mathieu May 17 '18 at 21:44
11

I spent the last hour or so trying to understand why my videos were not playing automatically. Thank you for this! – lior Oct 16 '18 at 02:23
2

Thank you for this! – Nikita Rogatnev Nov 21 '18 at 15:25
9

Its worth mentioning that we can't control the user's device and turn of Low Power Mode. The only thing we can do is prompt the user to "Turn off low power mode" to have a better experience – Muhammad Osama Jan 04 '19 at 05:52
1

Happened to me as well and drove me crazy till I found your post. I was already looking at the specs of Safari 11 and 11.1 if they maybe completely disabled autoplay but it was only the low power mode... a devs life can be hard. :-) – haeki May 09 '19 at 15:19

score 13 · Answer 3 · edited Mar 16 '20 at 00:57

Here is the little hack to overcome all the struggles you have for video autoplay in a website:

Check video is playing or not.
Trigger video play on event like body click or touch.

Note: Some browsers don't let videos to autoplay unless the user interacts with the device.

So scripts to check whether video is playing is:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

And then you can simply autoplay the video by attaching event listeners to the body:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.

You can see the working example with code here at this link:

How to autoplay video when the device is in low power mode / data saving mode / safari browser issue

But it requires user interaction before the video plays? Since our video is in the stage of the page, we need to ensure that the video plays even if the user is on low-battery-mode and before he interacts with the page. Because it would be pointless to start a video once the user wants to scroll down. — Tim Schmelter, Sep 14 '22 at 09:57

score 4 · Answer 4 · answered Nov 27 '20 at 00:53

I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.

Using dangerouslySetInnerHtml to embed the <video> code. For example:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb

Also, thanks to @boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)

Good to know, about the size requirement. – Shautieh Aug 25 '22 at 14:11 — Shautieh, Aug 25 '22 at 14:11

score 1 · Answer 5 · answered Dec 23 '21 at 15:58

I had the same problem - the video not play on iOS. I tried all the code options "playsinline autoplay loop muted". The problem was the video I received was in the wrong mp4 codec. So what helped us, was to upload the video to Vimeo and download the HD Version again. The video is now playing on all mobile devices.

You could also try to use mpeg streamclip. Here is a screenclip of VLC - those are the correct settings. Hope someone does not have to spend 2 hours searching for the problem - happy holidays

playsinline worked for me. Thank you for sharing! – Brian Cannard Dec 29 '21 at 01:38 — Brian Cannard, Dec 29 '21 at 01:38

score 1 · Answer 6 · answered May 30 '23 at 12:47

1

Sorry, for late answer, but today i found that you need to turn off Battery saving on iPhone to make video autoplay.

answered May 30 '23 at 12:47

Vyk

24
2

score -2 · Answer 7 · answered Nov 16 '21 at 07:30

Here is a simple solution to auto-play the video in IOS, I've already tried and it is perfectly working on IOS, Android, also on all the browsers on various platforms.

simply use (data-wf-ignore) and (data-object-fit) Attributes for the video and data-wf-ignore for the source tag..

You can see the working example with code here at this Snippet:

<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>

data-wf-ignore is not a standard attribute - what does that refer to? — addedlovely, Apr 13 '22 at 13:01

HTML5 Video autoplay on iPhone

7 Answers7

Linked

Related