html5 autoplay video in Mobile device

Question

Auto play is not working without muted attribute, when I try to open url in mobile device. How to play video without using muted attribute ? I need to volume without click on muted button and one more important thing is that all thing will be working without JS and Jquery.

check this one also for autoplay video: Link: http://stackoverflow.com/questions/16965170/html5-video-autoplay-not-working-correctly — swap, Feb 10 '17 at 13:32
I check your given link but it is work only desktop and when I opened in mobile device then video is replace by image. I also try your code but this is not working — Sawan mishra, Feb 10 '17 at 13:46

score 33 · Answer 1 · answered Feb 10 '17 at 14:16

You wont be able to achieve this in iOS without hacks. From the official Apple WebKit documentation:

Starting in iOS 10, WebKit relaxes its inline and autoplay policies to make these presentations possible, but still keeps in mind sites’ bandwidth and users’ batteries.

By default, WebKit will have the following policies:

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 element gains an audio track or becomes un-muted without a user gesture, playback will pause.

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

As for Mobile Chrome (Android):

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set, and playback of muted videos can be initiated progamatically with play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

https://developers.google.com/web/updates/2016/07/autoplay

On iPhone, `autoplay muted` worked for me only after adding `playsinline` attribute — adamboro, Aug 28 '17 at 09:00
Just to confirm, even though I used `muted` the autoplay wasn't working on iPhone Chrome. Adding `playsinline` fixed the issue. BTW the video still plays fullscreen - this attr apparently doesn't override `object-fit: cover;`. — Marko Bonaci, Nov 10 '18 at 02:37

score 16 · Answer 2 · answered Jan 24 '19 at 07:55

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto"  id="myVideo">
        <source src="assets/video/1.mp4" type="video/mp4">
        </video>

This code worked for me on Ios and Android phone

score 15 · Answer 3 · answered Jan 23 '20 at 10:23

15

On Ios make sure you don't have energy-saving on. This makes it so the video won't play.

answered Jan 23 '20 at 10:23

Gilbert123

151
1
2

2

I just spent hours figuring out why my video isn't autoplaying... it was cause energy-saving mode turned on. – Lukáš Irsák May 20 '20 at 07:17

score 6 · Answer 4 · answered Feb 10 '17 at 14:23

6

Simply include defaultMuted inline with your video to enable sound on autoplay. For example,

 <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

Reference: http://www.w3schools.com/tags/av_prop_defaultmuted.asp

answered Feb 10 '17 at 14:23

bowl0stu

352
1
12

Thanks! the "muted" attribute alone wasn't working for me but "defaultMuted" did :) – Nathalia Xavier Aug 21 '18 at 08:10

score 1 · Answer 5 · answered Jan 10 '18 at 19:20

I can't really make any sense of it but this managed to work on iOS Safari and Firefox (haven't tested Android):

<video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

...thing is, it only work after I set the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If anyone can actually explain why that happened, I'd really want to know. Otherwise...stay tuned for more wacky stuff :))

score 0 · Answer 6 · edited Oct 05 '17 at 09:03

0

You Try this one link also they have provide more Information about Why The Change?:

https://developers.google.com/web/updates/2016/07/autoplay

edited Oct 05 '17 at 09:03

Nhan

3,595
6
30
38

answered Feb 10 '17 at 13:50

swap

11
2

score 0 · Answer 7 · answered Feb 10 '17 at 14:04

Its simple see the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

You need check the browsers and the formats supported.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

score 0 · Answer 8 · answered Dec 18 '18 at 14:22

0

May be this will work for you

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

answered Dec 18 '18 at 14:22

Hiren Pipariya

80
8

score 0 · Answer 9 · answered Aug 17 '21 at 10:42

If it is an angular project don't forget to write [muted]="'muted'". Normal muted attribute is not working.

So, 'Autoplay' is working well on mobile browsers as well in this code-snippet below:

<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
    <!-- My Dynamic Content -->
    <source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">

    <!-- My Default Content, displaying when dynamic content has a problem -->
    <source [src]="baseURL + '/assets/videos/film_home.mp4'" type="video/mp4">

    Your browser does not support HTML5 video.
</video>

html5 autoplay video in Mobile device

9 Answers9

Linked