How to autoplay HTML5 mp4 video on Android?

Question

I had developed a mobile page by asp.net to play mp4 video.

I know iOS had disabled the autoplay function to minimize user bandwidth, so how can i autoplay HTML5 mp4 video on Android ?

I had already put autoplay in HTML5 code, but it doesn't work.

The following is my code:

<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>

Moreover, I had fixed the problem that user click on the image overlay can play the video. Thanks Karthi

here are the code:

<script type="text/javascript">
    $(document).ready(function() {
    $("#video1").bind("click", function() {
    var vid = $(this).get(0);
    if (vid.paused) { vid.play(); }
    else { vid.pause(); }
    }); 
}); 
</script>

Thanks

Joe

If you want to play the video while clicking poster, then create an image overlay , while onclick on that image overlay play the video — Karthi, Jan 31 '12 at 06:51
Since Android 4.2+ the **autoplay** html5 attribute for video is not supported. The video will only start to play after user clicks on it. In order to handle this you can use Modernizr "videoautoplay" feature (https://modernizr.com/download?videoautoplay-setclasses) that adds the class "videoautoplay" or "no-videoautoplay" on html tag. — TheodorosPloumis, Sep 29 '16 at 11:13
Care to accept [AngryFridges' answer](https://stackoverflow.com/questions/9075520/how-to-autoplay-html5-mp4-video-on-android/40718904#40718904)? That's at least a partial solution. — Arjan, Jun 25 '17 at 15:46

AngryFridges · Answer 1 · 2017-06-30T14:35:05.793

32

You can add the 'muted' and 'autoplay' attributes together to enable autoplay for android devices.

e.g.

<video id="video" class="video" autoplay muted >

edited Jun 30 '17 at 14:35

answered Nov 21 '16 at 11:20

AngryFridges

413
6
13

7

Thanks. ! This is correct answer as of now. adding "muted" works like charm. no other options are available right now as browser requires user gesture to play video otherwise cannot. – Jaymin Gajjar Jan 04 '17 at 16:24
1

For a video without sound this is the perfect solution, thank you! – Nick Tassone Jun 13 '17 at 16:40
Check https://developers.google.com/web/updates/2016/07/autoplay, seems to stop working – drtf Dec 10 '17 at 14:46

score 22 · Answer 2 · answered Jul 23 '14 at 18:18

22

I used the following code:

// get the video
var video = document.querySelector('video');
// use the whole window and a *named function*
window.addEventListener('touchstart', function videoStart() {
  video.play();
  console.log('first touch');
  // remove from the window and call the function we are removing
  this.removeEventListener('touchstart', videoStart);
});

There doesn't seem to be a way to auto-start anymore.

This makes it so that the first time they touch the screen the video will play. It will also remove itself on first run so that you can avoid multiple listeners adding up.

answered Jul 23 '14 at 18:18

james2doyle

1,399
19
21

Wow, your answer is really interesting. Worked well here. Thank you. – Paula Fleck Nov 27 '15 at 10:38
Thanks for a very clever and minimal solution. – Dominic P Aug 02 '16 at 23:21
5

On chrome on android, this also appears to have now been blocked, unfortunately. – jjr2000 Aug 22 '17 at 10:42

score 6 · Answer 3 · answered Jan 14 '15 at 20:01

Android actually has an API for this! The method is setMediaPlaybackRequiresUserGesture(). I found it after a lot of digging into video autoplay and a lot of attempted hacks from SO. Here's an example from blair vanderhoof:

package com.example.myProject;

import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebSettings;

public class myProject extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html");

        WebSettings ws = super.appView.getSettings();
        ws.setMediaPlaybackRequiresUserGesture(false);
    }
}

score 5 · Accepted Answer · answered Jan 31 '12 at 08:44

5

I don't think autoplay works on Android, but getting a video to play can be annoyingly tricky. I suggest giving this article a read: Making HTML5 Video work on Android phones.

answered Jan 31 '12 at 08:44

Ian Devlin

18,534
6
55
73

1

Nowadays adding `muted` for silent video, as described in [AngryFridges' answer](https://stackoverflow.com/questions/9075520/how-to-autoplay-html5-mp4-video-on-android/40718904#40718904) provides at least a partial solution. – Arjan Jun 25 '17 at 15:47

score 4 · Answer 5 · edited Oct 18 '17 at 09:37

4

In Android 4.4 and above you can remove the need for a user gesture so long as the HTML5 Video component lives in your own WebView

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

To get the video to autoplay, you'd still need to add autoplay to the video element:

<video id='video' controls autoplay>
  <source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>

edited Oct 18 '17 at 09:37

Michel de Ruiter

7,131
5
49
74

answered Aug 29 '15 at 06:37

Darren Hicks

4,946
1
32
35

1

From where does the webview come in this case? Meaning, if this is not JS, then please state that. – Roland Jegorov Dec 27 '17 at 09:23

score 4 · Answer 6 · answered Mar 02 '18 at 09:16

4

Important Note: Be aware that if Google Chrome Data Saver is enabled in Chrome's settings, then Autoplay will be disabled.

answered Mar 02 '18 at 09:16

Brendan

834
1
9
20

score 3 · Answer 7 · edited May 23 '17 at 11:54

3

Autoplay only works the second time through. on android 4.1+ you have to have some kind of user event to get the first play() to work. Once that has happened then autostart works.

This is so that the user is acknowledging that they are using bandwidth.

There is another question that answers this . Autostart html5 video using android 4 browser

edited May 23 '17 at 11:54

Community

1
1

answered Aug 21 '13 at 20:38

Leo

1,495
23
41

this is such bullshit, but thanks for confirming this issue for me. – Abadaba Mar 04 '14 at 04:43

score 1 · Answer 8 · edited Apr 30 '15 at 14:29

similar to KNaito's answer, the following does the trick for me

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('player'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

score 0 · Answer 9 · answered Jun 02 '14 at 04:00

0

In Android 4.1 and 4.2, I use the following code.

    evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
    var v = document.getElementById("video");
    v.dispatchEvent(evt);

where html is

    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>

This works well. But In Android 4.4, it does not work.

answered Jun 02 '14 at 04:00

KNaito

3,930
2
19
21

In 4.4 you can use: `webview.getSettings().setMediaPlaybackRequiresUserGesture(false);` in native code. – Roel Feb 16 '16 at 14:11
what is "evt"? is this one of the couple answers targetting PhoneGap and friends without acknowledging it? – igorsantos07 Dec 04 '17 at 00:05

score 0 · Answer 10 · answered Mar 10 '15 at 13:54

0

Here is a plugin for PhoneGap which solved the problem for me: https://build.phonegap.com/plugins/1031

I simply included it in my config.xml

answered Mar 10 '15 at 13:54

ethanpil

2,522
2
24
34

score 0 · Answer 11 · edited May 12 '17 at 18:49

0

<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>

edited May 12 '17 at 18:49

Floern

33,559
24
104
119

answered May 12 '17 at 18:46

Nahid Sheikh

1

1

I've tried the several attributes you added above, but none make the video autoplay on my Samsung Android phone or tablet. (`muted` does the trick for me, as described in another answer.) – Arjan Jun 25 '17 at 15:44

score 0 · Answer 12 · answered Mar 30 '18 at 14:43

I simplified the Javascript to trigger the video to start.

 var bg = document.getElementById ("bg"); 
 function playbg() {
   bg.play(); 
 }

<video id="bg" style="min-width:100%; min-height:100%;"  playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>

*"Files/snow.mp4" is just sample url

score 0 · Answer 13 · answered Apr 04 '18 at 15:10

0

Can add muted tag.

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

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

answered Apr 04 '18 at 15:10

Rajilesh Panoli

770
10
17

score 0 · Answer 14 · answered Jul 12 '20 at 18:06

don't use "mute" alone, use [muted]="true" for example following code:

<video id="videoPlayer" [muted]="true" autoplay playsinline loop style="width:100%; height: 100%;">
<source type="video/mp4" src="assets/Video/Home.mp4">
<source type="video/webm" src="assets/Video/Home.webm">
</video>

I test in more Android and ios

score -1 · Answer 15 · answered Mar 03 '16 at 10:20

-1

Chrome has disabled it. https://bugs.chromium.org/p/chromium/issues/detail?id=159336 Even the jQuery play() is blocked. They want user to initiate it so bandwidth can be saved.

answered Mar 03 '16 at 10:20

Ali Sadiq

1
3

3

jQuery have never had a `play` method. Any `play` method you call is not provided by jQuery. – Sheepy Aug 23 '16 at 09:57

How to autoplay HTML5 mp4 video on Android?

15 Answers15

Linked

Related