It all began when i needed to play a video from HTML5 page inside android's native browser running on android version 2.2 OS. After several attempts of playing the video via a much awaited <video> tag of HTML i realized that probably an android 2.2 device is not capable of handling the <video> tag. Hence i rested my case, and started creating my own 'custom android dialog' for playing video.
Here are the steps to create and show the dialog from HTML5 page:
Step1. Create a subclass of Dialog.
package com.om.wv;
import java.io.IOException;
import android.app.Dialog;
import android.content.Context;
import android.graphics.PixelFormat;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Button;
public class VideoPopup extends Dialog implements SurfaceHolder.Callback
{
MediaPlayer mediaPlayer;
SurfaceView surfaceView;
SurfaceHolder surfaceHolder;
boolean pausing = false;;
String videoPath = "";
String videoName = "";
public VideoPopup(Context context, final String name, final String path)
{
super(context);
this.videoName = name;
this.videoPath = path;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_dialog);
setTitle(this.videoName);
//------ ------ ------
Button buttonStartVideo = (Button)findViewById(R.id.start_button);
Button buttonPauseVideo = (Button)findViewById(R.id.pause_button);
Button buttonStopVideo = (Button)findViewById(R.id.end_button);
getWindow().setFormat(PixelFormat.UNKNOWN);
surfaceView = (SurfaceView)findViewById(R.id.videoElem);
surfaceHolder = surfaceView.getHolder();
surfaceHolder.addCallback(this);
surfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
mediaPlayer = new MediaPlayer();
//Handle the click-event on start button
buttonStartVideo.setOnClickListener(new Button.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pausing = false;
if(mediaPlayer.isPlaying()){
mediaPlayer.reset();
}
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
mediaPlayer.setDisplay(surfaceHolder);
try {
mediaPlayer.setDataSource(videoPath);
mediaPlayer.prepare();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
mediaPlayer.start();
}});
//Handle the click-event on pause button
buttonPauseVideo.setOnClickListener(new Button.OnClickListener(){
@Override
public void onClick(View v) {
if(pausing){
pausing = false;
mediaPlayer.start();
} else{
pausing = true;
mediaPlayer.pause();
}
}});
//Handle the click-event on stop button
buttonStopVideo.setOnClickListener(new Button.OnClickListener(){
@Override
public void onClick(View v) { mediaPlayer.stop(); }});
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { }
@Override
public void surfaceCreated(SurfaceHolder holder) { }
@Override
public void surfaceDestroyed(SurfaceHolder holder) { }
}
Step2. Create an activity class that will extend 'Activity'
package com.om.wv;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class WebVideoActivity extends Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webviewlayout);
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings myWebSettings = myWebView.getSettings();
myWebSettings.setJavaScriptEnabled(true);
myWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
myWebSettings.setDatabaseEnabled(true);
myWebSettings.setAllowFileAccess(true);
//create and add a Javascript interface
MyJavascriptInterface js = new MyJavascriptInterface(this);
myWebView.addJavascriptInterface(js, "Android");
// provision for alert
myWebView.setWebChromeClient(new WebChromeClient());
myWebView.loadUrl("file:///android_asset/html/test.html");
}
}
class MyJavascriptInterface
{
private static final String TAG = "WebVideoActivity";
private WebVideoActivity wvActivity;
protected MyJavascriptInterface(WebVideoActivity wvActivity)
{
this.wvActivity = wvActivity;
}
//Function that will be called from javascript as Android.showVideo('your vid name','/sdcard/urVideo.mp4')
public void showVideo(final String videoName, final String videoPath)
{
VideoPopup videoPopup = new VideoPopup(wvActivity, videoName, videoPath);
videoPopup.show();
}
}
Step 3. Create XML for the custom layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<VideoView android:id="@+id/videoElem"
android:layout_width="fill_parent"
android:layout_height="160dip">
</VideoView>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="0dip"
android:background="@drawable/cusombutton">
<Button
android:id="@+id/start_button"
android:layout_width="wrap_content"
android:layout_height="50dip"
android:text=" Start "
android:textSize="12dip" />
<Button
android:id="@+id/pause_button"
android:layout_width="wrap_content"
android:layout_height="50dip"
android:text=" Pause "
android:textSize="12dip" />
<Button
android:id="@+id/end_button"
android:layout_width="wrap_content"
android:layout_height="50dip"
android:text=" Stop "
android:textSize="12dip" />
</LinearLayout>
</LinearLayout>
Step4. Create an HTML5 file as test.html in asset>html> and make a javascript call to showVideo()
whenever you feel appropriate i.e. onclick()/onLoad()/onXXX
Also include an additional XML for rounded corners of buttons inside our video popup as
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:bottomRightRadius="10dip" android:bottomLeftRadius="10dip"
android:topLeftRadius="10dip" android:topRightRadius="10dip"/>
</shape>
That's it you are ready to rock and roll.
