ImageView显示视频的第一帧图片&&VideoView视频播放

ImageView显示视频的第一帧图片&&VideoView视频播放

我们在播放视频时，为了增强用户体验，在视频未播放时，需要显示视频的第一帧图片，增强用户体验。

效果如图：

在android中系统提供了一个类MediaMetadataRetriever，可以帮我们获取视频的第一帧数据，当然，其他帧图片也是可以获取的。下面来看具体代码：

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/activity_main"
             android:layout_width="match_parent"
             android:layout_height="200dp"
             android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <VideoView
        android:id="@+id/video"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <FrameLayout
        android:id="@+id/control"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_gravity="center"
            android:id="@+id/player"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/play"/>
    </FrameLayout>

</FrameLayout>

具体代码：

public class MainActivity extends Activity {

    private ImageView mImage;
    private VideoView mVideo;
    private FrameLayout mControl;
    private ImageView mPlayer;
    private String mPlayerPath;
    private final int PLAY = 0;
    private final int PAUSE = 1;
    private final int COMPLETE = 2;
    private int state;
    private boolean isFirst = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mImage = (ImageView) findViewById(R.id.image);
        mVideo = (VideoView) findViewById(R.id.video);
        mControl = (FrameLayout) findViewById(R.id.control);
        mPlayer = (ImageView) findViewById(R.id.player);

        mControl.setBackgroundColor(0x66000000);
        mPlayer.setVisibility(View.VISIBLE);

        mPlayerPath = Environment.getExternalStorageDirectory().getPath() + "/DCIM/Camera/VID_20161103_113849.mp4";

        initImage();

        initListener();
    }

    private void initImage() {
        mVideo.setVisibility(View.GONE);
        mImage.setVisibility(View.VISIBLE);

        /**
         * MediaMetadataRetriever class provides a unified interface for retrieving
         * frame and meta data from an input media file.
         */
        MediaMetadataRetriever mmr = new MediaMetadataRetriever();
        mmr.setDataSource(mPlayerPath);

        Bitmap bitmap = mmr.getFrameAtTime();//获取第一帧图片
        mImage.setImageBitmap(bitmap);
        mmr.release();//释放资源
    }


    private void initListener() {
        mControl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (isFirst) {
                    initVideo();
                    isFirst = false;
                } else {
                    if (mVideo.isPlaying()) {
                        mVideo.pause();
                        state = PAUSE;
                        mControl.setBackgroundColor(0x66000000);
                        mPlayer.setVisibility(View.VISIBLE);
                    } else if (state != COMPLETE) {
                        mVideo.start();
                        state = PLAY;
                        mControl.setBackgroundColor(Color.TRANSPARENT);
                        mPlayer.setVisibility(View.GONE);
                    } else {
                        mVideo.resume();//从新开始播放
                        state = PLAY;
                        mControl.setBackgroundColor(Color.TRANSPARENT);
                        mPlayer.setVisibility(View.GONE);
                    }
                }
            }
        });
    }

    private void initVideo() {
        mVideo.setVisibility(View.VISIBLE);
        mImage.setVisibility(View.GONE);
        mVideo.setVideoPath(mPlayerPath);

        mVideo.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mVideo.start();
                state = PLAY;
                mControl.setBackgroundColor(Color.TRANSPARENT);
                mPlayer.setVisibility(View.GONE);
            }
        });

        mVideo.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                state = COMPLETE;
                mControl.setBackgroundColor(0x66000000);
                mPlayer.setVisibility(View.VISIBLE);
            }
        });
    }
}