How to make html video autoplay on phones and tablets?

Question

I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone). I'm using this html code:

<video autoplay loop muted id="main-video">
  <source src="/themes/basic/video/intro.webm" type="video/webm"></source>
  <source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>

I've also tried to add javascript video.play() but it still doesn't work in Safari. How can i make video autoplay on mobile devices?

Rootless

Answer 1

The video won't autoplay in Safari IOS unless you meet the following requirements:

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

You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.

From the Webkit policies for video

Wimberly

I am curious to hear if this answer helped. I have met all of those requirements, and still can't get it to work. I created the video in Final Cut, detached and deleted the audio track in the timeline, exported it as video only (1.3mb mp4), and specified playsinline autoplay muted in the video tag. I can't even get it to play on iOS 10.2 at all, unless I put the video directly into the browser's address bar. – Spectatress

It's just html code, no js or even css. I will paste it into an answer below. – Spectatress

opera mini in ios supports autoplay by default, while chrome, firefox and safari does not and have not offering options to turn on. – Feudality

Answer 2

<video poster="video-sg.jpg" playsinline autoplay muted loop>
  <source src="caffe.webm" type="video/webm">
  <source src="caffe.mp4"" type="video/mp4">
  Your Browser May Not Support This
</video>

On any recent desktop browser, it autoplays and loops as it should. But in mobile safari, it doesn't autoplay, or even play at all. I can't even hit the play button to get it going. Just the poster image displays.

Apologies if I'm hijacking the OP's question, but at least it's the same question!

Spectatress

Answer 3

<video class="video" autoplay="true" muted="true" playsinline autoplay loop muted>

Multiplicate

I used my comment on a next project – Multiplicate