Posted on Android

Play HTML5 fullscreen Video on Android WebView

HTML5 introduced the video element for the purpose of playing videos or movies.  HTML5 video is intended to become the new standard way to show video on the web without plugins.  Almost all desktop and mobile browsers support the video element. Visit http://caniuse.com/video to check the HTML5 video support on different browsers.

In this post I’m going to explain how to play a HTML5 video in a Android WebView.

This is the test HTML page which has a video element.

<!DOCTYPE html>
<html>
<body>
<video id="video" width="320" height="240" controls>
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>

Save this file in the assets folder. In the Android activity load the url into the WebView.

WebView mWebView = (WebView) findViewById(R.id.webView1);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/test.html");

You should get the Internet permission in the manifest file.

<uses-permission android:name="android.permission.INTERNET"/>

Run the application and you can view the HTML5 video in the WebView.

html5 video

 

The video plays correctly. But the if we click the full screen button it won’t work. We should handle it manually. First change the layout like this.

<FrameLayout
 android:id="@+id/main_content"
 android:layout_width="match_parent"
 android:layout_height="300dip" >

<WebView
 android:id="@+id/webView1"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" />
 </FrameLayout>

 <FrameLayout
 android:id="@+id/target_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:visibility="gone">
 </FrameLayout>

Then extend the WebChromeClient class and we should override the onShowCustomView and onHideCustomView methods.

	class MyChromeClient extends WebChromeClient {

		@Override
		public void onShowCustomView(View view, CustomViewCallback callback) {
		    mCustomViewCallback = callback;
			mTargetView.addView(view);
			mCustomView = view;
			mContentView.setVisibility(View.GONE);
			mTargetView.setVisibility(View.VISIBLE);
			mTargetView.bringToFront();
		}

		@Override
		public void onHideCustomView() {
			if (mCustomView == null)
				return;

			mCustomView.setVisibility(View.GONE);
			mTargetView.removeView(mCustomView);
			mCustomView = null;
			mTargetView.setVisibility(View.GONE);
			mCustomViewCallback.onCustomViewHidden();
			mContentView.setVisibility(View.VISIBLE);
		}
	}

In the onCreate method, set the custom WebChromeClient to the WebView.

	private FrameLayout mTargetView;
	private FrameLayout mContentView;
	private CustomViewCallback mCustomViewCallback;
	private View mCustomView;
	private MyChromeClient mClient;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		WebView mWebView = (WebView) findViewById(R.id.webView1);
		mClient = new MyChromeClient();
		mWebView.setWebChromeClient(mClient);
		mWebView.loadUrl("file:///android_asset/test.html");

		mContentView = (FrameLayout) findViewById(R.id.main_content);
		mTargetView = (FrameLayout)findViewById(R.id.target_view);
	}

Finally override the onBackPressed method of the Activity and exit full screen when back is pressed.

	@Override
	public void onBackPressed(){
		if (mCustomView != null){
			mClient.onHideCustomView();
		}else{
			finish();
		}
	}

Now when we run the application, we can go full screen using the button.

Complete Android project can be found here http://www.sendspace.com/file/u1ty03

17 thoughts on “Play HTML5 fullscreen Video on Android WebView”

  5. excuse me, how you can play the video?
    i have to tray but allways fail, this is my code. please help me !

    MyActivity

    package com.greatsoft;

    import android.app.Activity;
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.webkit.WebChromeClient;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.FrameLayout;

    public class MainActivity extends Activity {

    private WebView container;
    private FrameLayout customViewContainer;
    private WebChromeClient.CustomViewCallback customViewCallback;
    private View mCustomView;
    private myWebChromeClient mWebChromeClient;
    private myWebViewClient mWebViewClient;

    /**
    * Called when the activity is first created.
    */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    customViewContainer = (FrameLayout) findViewById(R.id.customViewContainer);
    container = (WebView) findViewById(R.id.container);
    mWebViewClient = new myWebViewClient();
    container.setWebViewClient(mWebViewClient);
    mWebChromeClient = new myWebChromeClient();
    container.getSettings().setJavaScriptEnabled(true);
    container.setWebChromeClient(new WebChromeClient());
    container.loadUrl(“file:///android_asset/www/videomegaprofi.html”);

    }

    public boolean inCustomView() {
    return (mCustomView != null);
    }

    public void hideCustomView() {
    mWebChromeClient.onHideCustomView();
    }

    @Override
    protected void onPause() {
    super.onPause(); //To change body of overridden methods use File | Settings | File Templates.
    container.onPause();
    }

    @Override
    protected void onResume() {
    super.onResume(); //To change body of overridden methods use File | Settings | File Templates.
    container.onResume();
    }

    @Override
    protected void onStop() {
    super.onStop(); //To change body of overridden methods use File | Settings | File Templates.
    if (inCustomView()) {
    hideCustomView();
    }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {

    if (inCustomView()) {
    hideCustomView();
    return true;
    }

    if ((mCustomView == null) && container.canGoBack()) {
    container.goBack();
    return true;
    }
    }
    return super.onKeyDown(keyCode, event);
    }

    class myWebChromeClient extends WebChromeClient {

    private Bitmap mDefaultVideoPoster;
    private View mVideoProgressView;

    @Override
    public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback) {
    onShowCustomView(view, callback); //To change body of overridden methods use File | Settings | File Templates.
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {

    // if a view already exists then immediately terminate the new one
    if (mCustomView != null) {
    callback.onCustomViewHidden();
    return;
    }
    mCustomView = view;
    container.setVisibility(View.GONE);
    customViewContainer.setVisibility(View.VISIBLE);
    customViewContainer.addView(view);
    customViewCallback = callback;
    }

    @Override
    public View getVideoLoadingProgressView() {

    if (mVideoProgressView == null) {
    LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
    mVideoProgressView = inflater.inflate(R.layout.video_progress, null);
    }
    return mVideoProgressView;
    }

    @Override
    public void onHideCustomView() {
    super.onHideCustomView(); //To change body of overridden methods use File | Settings | File Templates.
    if (mCustomView == null) {
    return;
    }

    container.setVisibility(View.VISIBLE);
    customViewContainer.setVisibility(View.GONE);

    // Hide the custom view.
    mCustomView.setVisibility(View.GONE);

    // Remove the custom view from its container.
    customViewContainer.removeView(mCustomView);
    customViewCallback.onCustomViewHidden();

    mCustomView = null;
    }
    }

    class myWebViewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return super.shouldOverrideUrlLoading(view, url); //To change body of overridden methods use File | Settings | File Templates.
    }
    }

    @Override
    public void onBackPressed() {
    if (container.canGoBack()) {
    container.goBack();
    } else {
    super.onBackPressed();
    }
    }
    }

    main.xml

    Manifest.xml

    video_progress.xml

Leave a comment