tag:blogger.com,1999:blog-8674663454151809692024-03-14T15:04:35.410+05:30Afshar's Experimentshello U!!! This is a blog about some new things that i try out during my daily Java/J2EE/Javascript programming.Afshar Ahmedhttp://www.blogger.com/profile/14390815427620404201noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-867466345415180969.post-44866780042086888252011-05-18T19:13:00.000+05:302011-05-18T19:13:02.321+05:30How to create custom dialog to play video in android<div dir="ltr" style="text-align: left;" trbidi="on"><br />
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.<br />
<br />
Here are the steps to create and show the dialog from HTML5 page:<br />
<br />
Step1. Create a subclass of Dialog.<br />
<br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">package com.om.wv;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import java.io.IOException;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.app.Dialog;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.content.Context;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.graphics.PixelFormat;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.media.AudioManager;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.media.MediaPlayer;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.os.Bundle;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.view.SurfaceHolder;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.view.SurfaceView;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.view.View;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">import android.widget.Button;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;">public class VideoPopup extends Dialog implements SurfaceHolder.Callback </span><br />
<span class="Apple-style-span" style="font-size: x-small;">{</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> MediaPlayer mediaPlayer;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> SurfaceView surfaceView;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> SurfaceHolder surfaceHolder;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> boolean pausing = false;;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> String videoPath = "";</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> String videoName = "";</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> public VideoPopup(Context context, final String name, final String path) </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> super(context);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> this.videoName = name;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> this.videoPath = path;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> @Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> public void onCreate(Bundle savedInstanceState) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> super.onCreate(savedInstanceState);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> setContentView(R.layout.custom_dialog);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> setTitle(this.videoName);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> //------ ------ ------</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> Button buttonStartVideo = (Button)findViewById(R.id.start_button);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> Button buttonPauseVideo = (Button)findViewById(R.id.pause_button);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> Button buttonStopVideo = (Button)findViewById(R.id.end_button);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> getWindow().setFormat(PixelFormat.UNKNOWN);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> surfaceView = (SurfaceView)findViewById(R.id.videoElem);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> surfaceHolder = surfaceView.getHolder();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> surfaceHolder.addCallback(this);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> surfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> mediaPlayer = new MediaPlayer();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> //Handle the click-event on start button</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> buttonStartVideo.setOnClickListener(new Button.OnClickListener(){</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> @Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> public void onClick(View v) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> // TODO Auto-generated method stub</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> pausing = false;</span><br />
<span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> if(mediaPlayer.isPlaying()){</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.reset();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> }</span><br />
<span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.setDisplay(surfaceHolder);</span><br />
<span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> try {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.setDataSource(videoPath);</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.prepare();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> } catch (IllegalArgumentException e) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> // TODO Auto-generated catch block</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> e.printStackTrace();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> } catch (IllegalStateException e) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> // TODO Auto-generated catch block</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> e.printStackTrace();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> } catch (IOException e) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> // TODO Auto-generated catch block</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> e.printStackTrace();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> }</span><br />
<span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.start();</span><span class="Apple-style-span" style="font-size: x-small; white-space: pre;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span> }});</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> //Handle the click-event on pause button</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> buttonPauseVideo.setOnClickListener(new Button.OnClickListener(){</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>@Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>public void onClick(View v) {</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> if(pausing){</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> pausing = false;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.start();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> }</span><span class="Apple-style-span" style="font-size: x-small;"> else{</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> pausing = true;</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> mediaPlayer.pause();</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>}}); </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> //Handle the click-event on stop button</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> buttonStopVideo.setOnClickListener(new Button.OnClickListener(){</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>@Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>public void onClick(View v) { mediaPlayer.stop(); }}); </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> </span><br />
<span class="Apple-style-span" style="font-size: x-small;"> }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> @Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> @Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> public void surfaceCreated(SurfaceHolder holder) { }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> @Override</span><br />
<span class="Apple-style-span" style="font-size: x-small;"> public void surfaceDestroyed(SurfaceHolder holder) { }</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<div><br />
</div><div>Step2. Create an activity class that will extend 'Activity'</div><div><br />
</div><div><div><span class="Apple-style-span" style="font-size: x-small;">package com.om.wv;</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.app.Activity;</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.os.Bundle;</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.util.Log;</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.webkit.WebChromeClient;</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.webkit.WebSettings;</span></div><div><span class="Apple-style-span" style="font-size: x-small;">import android.webkit.WebView;</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;">public class WebVideoActivity extends Activity </span></div><div><span class="Apple-style-span" style="font-size: x-small;">{</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> /** Called when the activity is first created. */</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> @Override</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> public void onCreate(Bundle savedInstanceState) {</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> super.onCreate(savedInstanceState);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> setContentView(R.layout.webviewlayout);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> WebView myWebView = (WebView) findViewById(R.id.webview);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>WebSettings myWebSettings = myWebView.getSettings();</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebSettings.setJavaScriptEnabled(true);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebSettings.setDatabaseEnabled(true);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebSettings.setAllowFileAccess(true);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>//create and add a Javascript interface</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>MyJavascriptInterface js = new MyJavascriptInterface(this);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebView.addJavascriptInterface(js, "Android");</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>// provision for alert</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebView.setWebChromeClient(new WebChromeClient());</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>myWebView.loadUrl("file:///android_asset/html/test.html");</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> }</span></div><div><span class="Apple-style-span" style="font-size: x-small;">}</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;">class MyJavascriptInterface </span></div><div><span class="Apple-style-span" style="font-size: x-small;">{</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>private static final String TAG = "WebVideoActivity";</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>private WebVideoActivity wvActivity;</span></div><div><span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>protected MyJavascriptInterface(WebVideoActivity wvActivity)</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>this.wvActivity = wvActivity;</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div><div><span class="Apple-tab-span" style="white-space: pre;"><span class="Apple-style-span" style="font-size: x-small;"> </span></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span><span class="Apple-style-span" style="font-size: x-small;">//Function that will be called from javascript as Android.showVideo('your vid name','/sdcard/urVideo.mp4')</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> public void showVideo(final String videoName, final String videoPath)</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> {</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>VideoPopup videoPopup = new VideoPopup(wvActivity, videoName, videoPath);</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>videoPopup.show();</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> }</span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;">}</span></div></div><div><br />
</div><div>Step 3. Create XML for the custom layout</div><div><br />
</div><div><div><span class="Apple-style-span" style="font-size: x-small;"><?xml version="1.0" encoding="utf-8"?></span></div><div><span class="Apple-style-span" style="font-size: x-small;"><LinearLayout</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> xmlns:android="http://schemas.android.com/apk/res/android"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:orientation="vertical"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="fill_parent"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="fill_parent"></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <LinearLayout</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:orientation="horizontal"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="fill_parent"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="wrap_content"></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <VideoView android:id="@+id/videoElem"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>android:layout_width="fill_parent"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>android:layout_height="160dip"></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </VideoView></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </LinearLayout></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <LinearLayout</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:orientation="horizontal"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="fill_parent"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="wrap_content"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_weight="1"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:gravity="center"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:padding="0dip"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:background="@drawable/cusombutton"></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <Button</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:id="@+id/start_button"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="wrap_content"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="50dip"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:text=" Start "</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:textSize="12dip" /></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <Button</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:id="@+id/pause_button"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="wrap_content"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="50dip"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:text=" Pause " </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:textSize="12dip" /></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <Button</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:id="@+id/end_button"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_width="wrap_content"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:layout_height="50dip"</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:text=" Stop " </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:textSize="12dip" /></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </LinearLayout></span></div><div><span class="Apple-style-span" style="font-size: x-small;"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"></LinearLayout></span></div></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div>Step4. Create an HTML5 file as test.html in asset>html> and make a javascript call to showVideo()</div><div>whenever you feel appropriate i.e. onclick()/onLoad()/onXXX </div><div><br />
</div><div>Also include an additional XML for rounded corners of buttons inside our video popup as</div><div><br />
</div><div><div><span class="Apple-style-span" style="font-size: x-small;"><?xml version="1.0" encoding="UTF-8"?> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"><shape xmlns:android="http://schemas.android.com/apk/res/android" </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:shape="rectangle"> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"><br />
</span></div><div><span class="Apple-style-span" style="font-size: x-small;"> <corners android:bottomRightRadius="10dip" android:bottomLeftRadius="10dip" </span></div><div><span class="Apple-style-span" style="font-size: x-small;"> android:topLeftRadius="10dip" android:topRightRadius="10dip"/> </span></div><div><span class="Apple-style-span" style="font-size: x-small;"></shape> </span></div></div><div><br />
</div><div>That's it you are ready to rock and roll. </div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div></div>Afshar Ahmedhttp://www.blogger.com/profile/14390815427620404201noreply@blogger.com2