How to play Video in Android on click?

Question

I tried playing a Video from a remote URL & it works fine , the problem now is that the video starts playing automatically, I want the video to show up like a YouTube video with a play button in center & on clicking that the video should play .

public class Tabs extends Activity {
TabHost th;
VideoView video;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    //Create tabs using XML 

    video=(VideoView) findViewById(R.id.VideoView);
    String path1="http://www.w3schools.com/html5/movie.mp4";
    MediaController mc = new MediaController(this);
    mc.setAnchorView(video);
    mc.setMediaPlayer(video);
    Uri uri=Uri.parse(path1);
    video.setMediaController(mc);
    video.setVideoURI(uri);
    video.start();
}
}

Here is my code which works perfectly fine , but the video automatically starts playing , i need it to just show the first scene like YouTube video with a play button in center & on clicking that the video should start playing. Also it should show a thumbnail of the video

Answer 1

Ok since i got this working with the help of ColorWP(Thanks a lot) i thought i would post what i did :

Here is my xml where i use Frame Layout to overlap the thumbnail & the Play image.

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


    <TextView
        android:id="@+id/textView1"
        android:layout_width="292dp"
        android:layout_height="100dp"
        android:layout_x="7dp"
        android:layout_y="16dp"
        android:text="" />

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="281dp"
        android:layout_x="1dp"
        android:layout_y="138dp"
         >
    <RelativeLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <VideoView
            android:id="@+id/svid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />



        <ImageView
            android:id="@+id/simg"
            android:layout_width="187dp"
            android:layout_height="137dp"
            android:src="@drawable/ic_action_search"
            android:layout_centerInParent="true" />
        <ImageView
            android:id="@+id/playimg"
            android:layout_width="100dp"
            android:layout_height="87dp"
            android:src="@drawable/animated_loading"
            android:layout_centerInParent="true" 
          />
       </RelativeLayout>
    </FrameLayout>

In the code all i did was set a ClickListener on the play image , so when the user pressed the play image on the screen i used video.start(). That worked perfect :)

Here is a extract of my code:

 protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.single);
        vid=(VideoView) findViewById(R.id.svid);
        iv=(ImageView) findViewById(R.id.simg);
        ip=(ImageView) findViewById(R.id.playimg);
        t=(TextView) findViewById(R.id.textView1);
        final ProgressDialog pd=new ProgressDialog(SingleItem.this);

        link="http://www.w3schools.com/html5/movie.mp4";
         String path1=link;
            MediaController mc = new MediaController(this);
            mc.setAnchorView(vid);
            mc.setMediaPlayer(vid);
            uri=Uri.parse(path1);
            vid.setMediaController(mc);
            vid.setVideoURI(uri);
            vid.requestFocus();

            loadImage(thumb);

            ip.setClickable(true);
            ip.setImageResource(R.drawable.play);
            // ip.setVisibility(ImageView.INVISIBLE);
            vid.setOnPreparedListener(new OnPreparedListener() {

                @Override
                public void onPrepared(MediaPlayer mp) {
                    // TODO Auto-generated method stub
                    //ip.setVisibility(ImageView.VISIBLE);
                    pd.dismiss();

                }
            });
            ip.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub

                     vid.start();
                     pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
                        pd.setMessage("Loading Video...");
                        pd.setIndeterminate(false);
                        pd.setCancelable(true);
                        pd.show();

                        if(vid.isPlaying()){
                             iv.setVisibility(ImageView.INVISIBLE);
                             ip.setVisibility(ImageView.INVISIBLE);
                         }else{
                             iv.setVisibility(ImageView.VISIBLE);
                             ip.setVisibility(ImageView.VISIBLE);
                         }

                }
            });

Hope this helps :)

Answer 2

Setup the video player and URLs in the onCreate and do the actual playing by implementing onClickListener.

In your example (remember to import missing packages and create a button with ID of buttonStart):

public class Test extends Activity {
    TabHost th;
    VideoView video;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // Create tabs using XML

        video = (VideoView) findViewById(R.id.VideoView);
        String path1 = "http://www.w3schools.com/html5/movie.mp4";
        MediaController mc = new MediaController(this);
        mc.setAnchorView(video);
        mc.setMediaPlayer(video);
        Uri uri = Uri.parse(path1);
        video.setMediaController(mc);
        video.setVideoURI(uri);
        Button buttonStart = (Button) findViewById(R.id.buttonStart);
        buttonStart.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                video.start();
            }

        });

    }
}

As for displaying the thumbnail, if you have its URL, you can start an Async task that will retrieve the remote image and overlay it over the video player (use FrameLayout to achieve overlaying Views). Then setup an onClickListener on the overlaying image (see the code on how it's done for a button, the same logic can be followed for an ImageView). Just make sure you set the ImageView to be clickable.

Answer 3

Instead of streaming it on onCreate method you can add a button and add a listener to it, and on its click event you can stream the video

Answer 4

Write video.start(); in you button onClick Listener.

Thanks.