CODEWITHSUNDEEP
ioshtmlvideowebkitautoplay
SeBa
SeBa

Reputation: 1801

HTML5 Video autoplay on iPhone

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:

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

Upvotes: 180

Views: 276254

Answers (10)

Pedro Monteagudo
Pedro Monteagudo

Reputation: 376

In my case I was using the <track> tag just to silent some eslint/biome rule. Removing it fixed the issue

<video
  src={assetUrl}
  onClick={handleVideoClick}
  ref={videoRef}
  playsInline
  className="w-full h-full object-cover"
  autoPlay={autoPlay}
  {...restProps}
>
  {/* <track kind="captions" /> */} <--- THIS WAS THE PROBLEM
</video>

Upvotes: 0

Patricio Garcia
Patricio Garcia

Reputation: 13

it's 2024 and I was having the same issue, what worked for my is this configuration in the video tag:

            <video 
                autoplay="autoPlay" 
                loop="loop" 
                muted="muted" 
                playsinline="playsinline"
                class="video absolute z-10 w-auto min-w-full min-h-full max-w-none brightness-50"
            > 
                <source src={YOUR_VIDEO_LINK}>
            </video> 
            <canvas class="canvas" style="display: none;"></canvas>

The use of a canva tag right below the video tag to convert it to the new video canva in iOS with the following script (I'm using Typescript):

    <script>
    let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

    if(isIOS) {
        var CanvasVideoPlayer: any;

        new CanvasVideoPlayer({
            videoSelector: '.video',
            canvasSelector: '.canvas',
            timelineSelector: false,
            autoplay: true,
            makeLoop: true,
            pauseOnClick: false,
            audio: false
        })
    } else {
        document.querySelectorAll('.canvas')[0].setAttribute("style", "display:none;");
    }

</script>

Hope this help someone ✌🏼

Upvotes: 0

Bayram
Bayram

Reputation: 221

In my case it was camel casing in React:

   <video
      height="400em"
      autoPlay // --> not autoplay
      loop
      muted
      playsInline // --> not playsinline
    >

Upvotes: 0

Vyk
Vyk

Reputation: 54

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

Upvotes: 3

pixelcrash
pixelcrash

Reputation: 31

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

Codec we used

Upvotes: 1

Tahir
Tahir

Reputation: 420

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>

Upvotes: -2

maxrojas
maxrojas

Reputation: 181

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

  1. 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>`}}
/>
  1. 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+)

Upvotes: 6

Shakti
Shakti

Reputation: 773

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

  1. Check video is playing or not.
  2. 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

Upvotes: 13

Pete Florence
Pete Florence

Reputation: 5032

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/

Upvotes: 488

Dilip Godhani
Dilip Godhani

Reputation: 2174

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

Upvotes: 137

Related Questions