Android HTML5 video - works when clicking play, but not video.play()

android html html5-video

30,695

Solution 1

It wouldn't work for the same reason browsers block calls to window.open(), because allowing it would allow web developers to subvert user preference not to auto play media (or open popup windows).

The difference between clicking play and using this method is exactly what you've said: the click. These sort of calls are allowed in click events, but not generally.

Solution 2

After hours of searching and testing "solutions" this is the one that worked for me! Solved by Angry Fridges (thanks a lot for that).

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

noticed both autoplay and muted, they are both needed.

This allowed the video to play in both computer and on android phone.

Solution 3

I got it to work! Now it can play HTML5 video inline with "autoplay" working! Damn this took time! Ok this is what I did:

<div id=content>
    <video width="1280px" height="720px" src="file:///android_asset/videos/Moments_of_Everyday_Life.mp4"></video>
</div>

Note: Some people say they get it to work when adding poster and or preload. I got this working with and with out.

Javascript autoplay the video:

<script type="text/javascript">
    $(function(){
        function callback () {
            document.querySelector('video').src = document.querySelector('video').src
            document.querySelector('video').play();
        }
        window.addEventListener("load", callback, false);

    });
</script>

I hope this can help any one, I have struggled with this for a week now!

Just to be clear:

working on:

Android 4.0.4 Samsung 10.1 Tablet Native device Browser

Solution 4

I found on kitkat that Firefox will allow you to play videos programatically.

Also, Chrome will as well if you go into chrome://flags and enable the "Disable gesture requirement for media playback" option.

Solution 5

I've made the following discoveries about HTML5 video on Android 4.0+.

To perform these tests, I made a sandbox app which consisted of an HTML page saved in /assets.

HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 Video Test</title>
    </head>

    <body>

        <video preload="metadata"><source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"></video>

        <script> 
          var myvideo = document.getElementsByTagName('video')[0];

          myvideo.addEventListener('loadeddata', function() {
            console.log("** RECEIVED loadeddata **");
            myvideo.play();//this first play is needed for Android 4.1+
          }, false);

          myvideo.addEventListener('canplaythrough', function() {
            console.log("** RECEIVED canplaythrough **");
            myvideo.play();//this second play is needed for Android 4.0 only
          }, false);

        </script>

    </body>
</html>

JAVA: ("/assets/html5video.html")

private WebView mWebView;
private ProgressBar mProgressBar;

@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.videotest);

    // progress bar
    mProgressBar = (ProgressBar) findViewById(R.id.videotest_progressbar);
    mProgressBar.setProgress(0);
    mProgressBar.setVisibility(View.VISIBLE);

    // webview
    mWebView = (WebView) findViewById(R.id.videotest_webview);
    mWebView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
    {
        //NOTE: this is required only for Android 4.2.2+
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress) {
            Log.i(TAG, "Progress = "+progress);
            mProgressBar.setProgress(progress);
        }
    });
    mWebView.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Toast.makeText(TestActivity.this, "Problem loading webpage", Toast.LENGTH_LONG).show();
            mProgressBar.setVisibility(View.GONE);
        }
        public void onPageFinished(WebView view, String url) {
            mProgressBar.setVisibility(View.GONE);
        }
    });
}

@Override
protected void onResume() {
    super.onResume();
    mWebView.loadUrl("file:///android_asset/html5video.html");
}

Android 4.0.3 NOTE

I kept running into the annoying exception java.lang.Throwable: EventHub.removeMessages(int what = 107) is not supported before the WebViewCore is set up. Thankfully, it did not affect video playback.

View more solutions

30,695

Author by

Harry

Updated on July 22, 2020

Comments

Harry almost 4 years
I understand that html5 video on Android cannot autoplay. As it stands my video works on the device only when the user clicks on the play button.
```
<video width="640px" height="360px" src="media/video/Moments_of_Everyday_Life.mp4" controls id="video"></video>


<script type="text/javascript">
    $(function(){
        var video  = document.getElementById('video');
        video.play();
    });
</script>
```
It works on my desktop though.

Why would this not work? And what is the difference between clicking play and using .play() ?
Harry about 11 years

so what your saying is there is no way for the video to autoplay? o you have a possible suggestion?
robertc about 11 years

Does your browser on your desktop block autoplay? Is there an open defect like this one against your browser? My suggestion is: don't have your app depend on autoplay (or a script equivalent), it's not a feature you can depend upon because browsers will continue implementing features to block it.
Harry about 11 years

I finally got it working! I think I will post my answer, cause most people on the net dont have an answer. Now lets hope this works for others
Someone Somewhere over 10 years

It worked on all the phones I tried... until a colleague brought me an HTC One running Android 4.1.2. In contrast, the Samsung Note 2 that I have is also running Android 4.1.2 and it autoplays ! I suppose it's a good idea to specify the "poster" attribute.
abhhab about 10 years

I used the same code. It is not working on android. I am using SAPUI5 with phonegap.
Kalai.G almost 10 years

Dude am struggling for the 4 days, could please elabrate your HTML and Code. Please post it
Digital Human almost 8 years

@Harry when will you post your answer?
Jaydev almost 8 years

How do I use this javascript snip for android ? Can you please edit the answer for the same ?
sradha over 7 years

This is not working for my android marshmallow in moto 4g plus. I am struggling for 2 days .Explain more
quickshiftin almost 5 years

This is the correct abridged answer; I embellished with an example below. Upvote here from me!