How to autoplay HTML5 mp4 video on Android?

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

Solution 1:

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

e.g.

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

Solution 2:

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.

Solution 3:

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);
    }
}

Solution 4:

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.

Solution 5:

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>