Enabling HTML5 video playback in android WebView?

Question

I am building a simple webview application which is now displaying a website filled with short video clips, using the HTML5 video player. Everything runs ok in the default android web browser but webview wont't play any of the video clips.

The Html code used to play the video clips is as follows:

<video poster preload="true" controls autoplay width="500" height="200">
  <source src="http://www.edmondvarga.com/demo/videos/video.mp4" type="video/mp4">
  </video>

Main Activity.java :

package tscolari.mobile_sample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class InfoSpotActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.main);

        WebView mainWebView = (WebView) findViewById(R.id.mainWebView);

        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        mainWebView.setWebViewClient(new MyCustomWebViewClient());
        mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        mainWebView.loadUrl("http://server.info-spot.net");
    }

    private class MyCustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

How could I enable video playback inside webview?

When you say won't play, do you mean won't play at all, or won't auto-play? Just so you know autoplay is not supported on Android. — peterept, Jun 23 '13 at 10:08
Hi, It won't play at all. Only the grey thumbnail appears with the default clip icon inside. On the other hand, I have manage to autoplay the clip inside the default android web browser using a script: http://server.info-spot.net But the same clip won't play inside webview....:( — Edmond Tamas, Jun 23 '13 at 10:38

peterept · Accepted Answer · 2013-06-23T11:00:03.607

28

I know from a previous project we did that you need to use the WebChromeClient to get HTML5 video to play. (And this also gives you hardware accelerated support too - providing you also set the flags on your activity).

Use:

        mainWebView.setWebChromeClient(new WebChromeClient());

Put that before you set the setWebViewClient. You can override the WebChromeClient to intercept any events you need to handle.

And in your AndroidManifest.xml within your activity definition, add:

android:hardwareAccelerated="true"

The following quote is from this SDK Page (scroll down to HTML5 Video support)

In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.

edited Jun 23 '13 at 11:00

answered Jun 23 '13 at 10:52

peterept

4,407
23
32

Thanks for the support, can't wait to try it, as soon as I get back to my pc. – Edmond Tamas Jun 23 '13 at 11:14
I have added the line to my ISActivity.java, and I get an error message: "WebChromeClient cannot be resolved to a type" - Right in front of it. :( . – Edmond Tamas Jun 23 '13 at 12:58
I am not an expert, still learning. But I need to get this to work, please. – Edmond Tamas Jun 23 '13 at 13:34
Make sure you add an import: `import android.webkit.WebChromeClient;` – peterept Jun 24 '13 at 02:35
Sorry for the delay, yes last night I have figured out. Imported the class and now it is ok! :) – Edmond Tamas Jun 24 '13 at 10:33
But there is another little problem, please follow: http://stackoverflow.com/questions/17273046/android-webview-video-autoplay-success-but-same-apk-fails-on-android-tv-mini-pc – Edmond Tamas Jun 24 '13 at 10:39
1

Hi Edmond, please mark this as correct if you are satisfied. Regarding your other question, I have to tell you there is NO reliable way to get video to autoplay on any Android phone. It will always be a hack, because By design, Android (and iOS) do not want you to auto play videos. There have been various hack (javscript tricks post body load, android hacks - simulating finger press) but none I have seen that are reliable. The only way maybe to post a custom version of webkit. – peterept Jun 25 '13 at 11:25

score 1 · Answer 2 · edited Nov 10 '21 at 09:14

1

As far as I know android webview has Chromium engine and it does not support HTML 5 videos (H.264) in fullscreen mode. You can try playing video but video goes out of the screen and its not consistence across all the devices. If webview is the main part of the app then its better to switch to mozilla geckoview but it will add 30 to 40 mb to your apk.

edited Nov 10 '21 at 09:14

marc_s

732,580
175
1,330
1,459

answered Nov 10 '21 at 05:39

ashwath hegde

606
8
12

score 0 · Answer 3 · answered Mar 26 '21 at 15:20

0

Given below html5 tag works for me without changing anything in android code

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>

You can check in detail here

Credit: irregular shed

answered Mar 26 '21 at 15:20

Vijay Rana

123
1
3
13

score -16 · Answer 4 · edited Sep 21 '14 at 07:20

-16

I got success to show video using html5 video tag using the following code:

mainWebView.setWebChromeClient(new WebChromeClient());

android:hardwareAccelerated="true"

edited Sep 21 '14 at 07:20

Phantom

1,704
4
17
32

answered Sep 21 '14 at 06:42

Mostafizur Rahman

1
1

i think i still facing the html5 problems under webview... how about geckoview @Phantom ? – gumuruh May 27 '20 at 09:09

Enabling HTML5 video playback in android WebView?

4 Answers4

Linked