Android - how to set a thumbnail on a VideoView with a uri source?

Question

I need to get an image from a uri into my VideoView when it loads. It should disappear and start playing the video when play is hit. This is my VideoView code -

<RelativeLayout
    android:id="@+id/video_frame"
    android:layout_width="fill_parent"
    android:layout_height="300dp"
    android:background="#000"
    >

    <VideoView
        android:id="@+id/video"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        />

    <ImageButton
        android:id="@+id/play_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_media_play"
        />

</RelativeLayout>

This is how I use it -

final VideoView video = (VideoView) convertView.findViewById(R.id.video);

    Uri uri = Uri.parse(submission.getUrl());
    video.setVideoURI(uri);

    final ImageButton playButton = (ImageButton) convertView.findViewById(R.id.play_button);
    video.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
        @Override
        public void onCompletion(MediaPlayer mp) {
            playButton.setVisibility(View.VISIBLE);
        }
    });
    playButton.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            if (video.isPlaying()){
            }else{
                video.start();
                playButton.setVisibility(View.GONE);
            }
        }

    });

Answer 1

VideoView shows a video. It does not show an image. Similarly, ImageView shows an image. It does not show a video.

So, use a FrameLayout wrapped around an ImageView and a VideoView. Have the ImageView be visible and the VideoView be invisible at the outset. Load the image into the ImageView. When the user clicks your play button, switch the visibility such that the VideoView is now visible and the ImageView is invisible, and start playback of your video.

Answer 2

Create a thumpnail of video and show it on ImageView. In case you need to show play button you need another ImageView (with Play button icon). On click of Play icon image view play the video on VideoView.

    imageView.setImageBitmap(ThumbnailUtils.createVideoThumbnail(urlPath, 
    MediaStore.Video.Thumbnails.MICRO_KIND));

Answer 3

I have created an ImageView for thumbnail like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:clickable="true"
    android:focusable="true">

 <VideoView
    android:id="@+id/video_view"
    android:layout_width="match_parent"
    android:layout_height="220dp"/>
<ImageView
    android:id="@+id/videoView_thumbnail"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:scaleType="centerCrop"/>

</RelativeLayout>

And add setOnPreparedListener and setOnCompletionListener in Java like this way

  VideoView videoView = (VideoView) view.findViewById(R.id.video_view);
  ImageView thumbnailView=(ImageView)view.findViewById(R.id.videoView_thumbnail);

  Glide.with(getApplicationContext()).load(your_Image_Path).into(thumbnailView);
 //you can add progress dialog here until video is start playing;

    mediaController= new MediaController(getContext());
    mediaController.setAnchorView(videoView);
    videoView.setMediaController(mediaController);
    videoView.setKeepScreenOn(true);
    videoView.setVideoPath(your_video_path);
    videoView.start();         //call this method for auto playing video

    videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
        @Override
        public void onPrepared(MediaPlayer mediaPlayer) {
            thumbnailView.setVisibility(View.GONE);
 //you can Hide progress dialog here when video is start playing;

        }
    });
    videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
        @Override
        public void onCompletion(MediaPlayer mediaPlayer) {
            videoView.stopPlayback();
            thumbnailView.setVisibility(View.VISIBLE);

        }
    });

It works for me very well. I hope it's useful for all.