Play <video> tags from the Webview in a Fullscreen video player.

Code from the Froyo Android Browser was adapted to support <video> elements in Cordova. The WebView creates a "CustomView" (a video player) that is displayed fullscreen.
It uses API level 7, work has to be done to support lower version.

Tested on Androdi 2.2: works
Tested on Android 4.1: doesn't work. It seems videos are handled differently (without the use of "Custom views"). To make video playing work on Android 4, add the android:hardwareAccelerated="true" attribute to the main activity of the AndroidManifest.

framework/src/org/apache/cordova/CordovaChromeClient.java

@@ -27,7 +27,14 @@ import org.json.JSONException;
 import android.app.AlertDialog;
 //import android.content.Context;
 import android.content.DialogInterface;
+import android.util.Log;
+import android.view.Gravity;
 import android.view.KeyEvent;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewGroup.LayoutParams;
+import android.view.WindowManager;
 //import android.view.View;
 import android.webkit.ConsoleMessage;
 import android.webkit.JsPromptResult;
@@ -37,6 +44,11 @@ import android.webkit.WebStorage;
 import android.webkit.WebView;
 import android.webkit.GeolocationPermissions.Callback;
 import android.widget.EditText;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
+import android.widget.ProgressBar;
+import android.widget.RelativeLayout;
+import android.widget.Toast;
 
 /**
  * This class is the WebChromeClient that implements callbacks for our web view.
@@ -48,6 +60,9 @@ public class CordovaChromeClient extends WebChromeClient {
     private CordovaInterface cordova;
     private CordovaWebView appView;
 
+    // the video progress view
+    private View mVideoProgressView;
+    
     /**
      * Constructor.
      *
@@ -329,4 +344,45 @@ public class CordovaChromeClient extends WebChromeClient {
         super.onGeolocationPermissionsShowPrompt(origin, callback);
         callback.invoke(origin, true, false);
     }
+    
+    // API level 7 is required for this, see if we could lower this using something else
+    @Override
+    public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
+        this.appView.showCustomView(view, callback);
+    }
+
+	@Override
+	public void onHideCustomView() {
+    	this.appView.hideCustomView();
+	}
+    
+    @Override
+    /**
+     * Ask the host application for a custom progress view to show while
+     * a <video> is loading.
+     * @return View The progress view.
+     */
+    public View getVideoLoadingProgressView() {
+
+	    if (mVideoProgressView == null) {	        
+	    	// Create a new Loading view programmatically.
+	    	
+	    	// create the linear layout
+	    	LinearLayout layout = new LinearLayout(this.appView.getContext());
+	        layout.setOrientation(LinearLayout.VERTICAL);
+	        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
+	        layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
+	        layout.setLayoutParams(layoutParams);
+	        // the proress bar
+	        ProgressBar bar = new ProgressBar(this.appView.getContext());
+	        LinearLayout.LayoutParams barLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
+	        barLayoutParams.gravity = Gravity.CENTER;
+	        bar.setLayoutParams(barLayoutParams);   
+	        layout.addView(bar);
+	        
+	        mVideoProgressView = layout;
+	    }
+    return mVideoProgressView; 
+    }
+
 }

framework/src/org/apache/cordova/CordovaWebView.java

@@ -39,11 +39,16 @@ import android.net.Uri;
 import android.os.Bundle;
 import android.util.AttributeSet;
 import android.util.Log;
+import android.view.Gravity;
 import android.view.KeyEvent;
+import android.view.View;
+import android.view.ViewGroup;
 import android.view.WindowManager;
+import android.webkit.WebChromeClient;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebSettings.LayoutAlgorithm;
+import android.widget.FrameLayout;
 
 public class CordovaWebView extends WebView {
 
@@ -84,6 +89,16 @@ public class CordovaWebView extends WebView {
 
     private boolean handleButton = false;
 
+    /** custom view created by the browser (a video player for example) */
+    private View mCustomView;
+    private WebChromeClient.CustomViewCallback mCustomViewCallback;
+    
+    static final FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER =
+            new FrameLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            Gravity.CENTER);
+    
     /**
      * Constructor.
      *
@@ -208,8 +223,9 @@ public class CordovaWebView extends WebView {
         
         //Jellybean rightfully tried to lock this down. Too bad they didn't give us a whitelist
         //while we do this
-        if(android.os.Build.VERSION.SDK_INT > android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1)
+        // TODO .setAllowUniversalAccessFromFileURLs(true); is abstract and cannot be called
-            settings.setAllowUniversalAccessFromFileURLs(true);
+        //if(android.os.Build.VERSION.SDK_INT > android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1)
+        //    settings.setAllowUniversalAccessFromFileURLs(true);
         // Enable database
         settings.setDatabaseEnabled(true);
         String databasePath = this.cordova.getActivity().getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
@@ -733,6 +749,11 @@ public class CordovaWebView extends WebView {
     {
         // If back key
         if (keyCode == KeyEvent.KEYCODE_BACK) {
+        	// A custom view is currently displayed  (e.g. playing a video)
+        	if(mCustomView != null) {
+        		this.hideCustomView();
+        	} else {
+        	// The webview is currently displayed
 	            // If back key is bound, then send event to JavaScript
 	            if (this.bound) {
 	                this.loadUrl("javascript:cordova.fireDocumentEvent('backbutton');");
@@ -750,6 +771,7 @@ public class CordovaWebView extends WebView {
 	                }
 	            }
         	}
+        }
         // Legacy
         else if (keyCode == KeyEvent.KEYCODE_MENU) {
             this.loadUrl("javascript:cordova.fireDocumentEvent('menubutton');");
@@ -871,4 +893,49 @@ public class CordovaWebView extends WebView {
     public boolean hadKeyEvent() {
         return handleButton;
     }
+
+
+    public void showCustomView(View view, WebChromeClient.CustomViewCallback callback) {
+    	// This code is adapted from the original Android Browser code, licensed under the Apache License, Version 2.0
+    	Log.d(TAG, "showing Custom View");
+        // if a view already exists then immediately terminate the new one
+        if (mCustomView != null) {
+            callback.onCustomViewHidden();
+            return;
+        }
+        
+        // Store the view and its callback for later (to kill it properly)
+    	mCustomView = view;
+    	mCustomViewCallback = callback;
+    	
+        // Add the custom view to its container.
+    	ViewGroup parent = (ViewGroup) this.getParent();
+    	parent.addView(view, COVER_SCREEN_GRAVITY_CENTER);
+    	
+    	// Hide the content view.
+    	this.setVisibility(View.GONE);
+    	
+    	// Finally show the custom view container.
+    	parent.setVisibility(View.VISIBLE);
+    	parent.bringToFront();
+    }
+
+	public void hideCustomView() {
+    	// This code is adapted from the original Android Browser code, licensed under the Apache License, Version 2.0
+    	Log.d(TAG, "Hidding Custom View");
+		if (mCustomView == null) return;
+
+		// Hide the custom view.
+		mCustomView.setVisibility(View.GONE);
+		
+		// Remove the custom view from its container.
+		ViewGroup parent = (ViewGroup) this.getParent();
+		parent.removeView(mCustomView);
+		mCustomView = null;
+		mCustomViewCallback.onCustomViewHidden();
+		
+        // Show the content view.
+        this.setVisibility(View.VISIBLE);
+	}
+
 }