Android仿微信小视频录制功能（二）

接着上一篇，在完成了录制功能后，伟大的哲学家沃兹基索德曾经说过：“有录就有放。”，那么紧接着就来实现播放功能，按照国际惯例，先上下效果图：

可以看到界面上存在着瑕疵，强迫症患者可能无法忍受，所以抓紧进入功能实现上来。

需求

简单分析下需求，需求很简单：因为我们录制的视频保存在本地，获取它不需要进行网络交互，但是仍然希望有一个进度条的展示，在进度条展示期间所呈现的是视频的预览图片，进度条加载完成后再将视频展示并播放，播放完成后再循环播放，并且提示点击可以关闭。

实现

功能实现上，提到视频播放首先想到的就是调用系统的VideoView控件来实现。所以，我们先用它来实现前面分析的需求上的功能，再来简单探究下这个VideoView。
这里先给出界面布局吧：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/video_root"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/black"    android:orientation="vertical" >    <VideoView android:id="@+id/video_view"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"     />    <ImageView android:id="@+id/video_thumb_view"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:scaleType="fitXY"     />    <com.example.activity.widget.movie.view.CircleProgressView        android:id="@+id/circle_progress"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"    />RelativeLayout>

简单暴力的把三个控件叠在一起。
功能实现上，由于采用VideoView的缘故，许多方法都是封装好的，所以实现起来也是非常的简单，就先给出代码：

public class MoviePlayerActivity extends BaseActivity implements OnPreparedListener,OnErrorListener,OnCompletionListener{    private VideoView mVideoView;    private CircleProgressView mProgressView;    private ImageView mThumbView;    private int completeCount = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.movie_player_activity);        initView();        initData();    }    private void initView() {        mVideoView = (VideoView) findViewById(R.id.video_view);        mProgressView = (CircleProgressView) findViewById(R.id.circle_progress);        mThumbView = (ImageView) findViewById(R.id.video_thumb_view);        mVideoView.setOnPreparedListener(this);        mVideoView.setOnErrorListener(this);        mVideoView.setOnCompletionListener(this);        mProgressView.setMax(100);//      View contentView = getWindow().getDecorView().findViewById(R.id.content);        RelativeLayout root = (RelativeLayout) findViewById(R.id.video_root);        root.setOnTouchListener(mContentTouch);    }    private void initData() {        MediaObject MediaObject = (MediaObject) getIntent().getSerializableExtra("MediaObj");        PlayerTask task = new PlayerTask(MediaObject);        task.execute();    }    private OnTouchListener mContentTouch = new OnTouchListener() {        @Override        public boolean onTouch(View v, MotionEvent event) {            int action = event.getAction();            switch (action) {            case MotionEvent.ACTION_DOWN:                if (completeCount >= 1)                    finish();                break;            default:                break;            }            return true;        }    };    @Override    protected void onResume() {        // TODO Auto-generated method stub        super.onResume();        if(mVideoView != null)            mVideoView.resume();    }    @Override    protected void onPause() {        // TODO Auto-generated method stub        super.onPause();        if(mVideoView != null)            mVideoView.pause();    }    @Override    protected void onDestroy() {        // TODO Auto-generated method stub        super.onDestroy();        if(mVideoView != null)            mVideoView.stopPlayback();    }    @Override    public void onCompletion(MediaPlayer mp) {        // TODO Auto-generated method stub        completeCount ++;        if(completeCount >= 1)            Tools.showToast("点击关闭..");        mVideoView.start();    }    @Override    public boolean onError(MediaPlayer mp, int what, int extra) {        return false;    }    @Override    public void onPrepared(MediaPlayer mp) {}    private class PlayerTask extends AsyncTask<Void, Integer, Void>{        /* (non-Javadoc)         */        private int count = 0;        private MediaObject mMediaObject;        public PlayerTask(MediaObject obj){            this.mMediaObject = obj;        }        private Bitmap decodeThumbBitmap(String path){            BitmapFactory.Options options = new Options();            options.inPreferredConfig = Bitmap.Config.RGB_565;            return BitmapFactory.decodeFile(path,options);        }        @Override        protected void onPreExecute() {            int screenWidth = DisplayUtil.getScreenWidth();            mProgressView.setVisibility(View.VISIBLE);            mThumbView.setVisibility(View.VISIBLE);            if(!StringUtils.isEmpty(mMediaObject.getOutputVideoThumbPath())){                Bitmap thumbBitmap = decodeThumbBitmap(mMediaObject.getOutputVideoThumbPath());                int width = thumbBitmap.getWidth();                int height = thumbBitmap.getHeight();                mThumbView.getLayoutParams().width = screenWidth;                mThumbView.getLayoutParams().height = (int)((width/height *1.0f) * screenWidth);                mThumbView.setImageBitmap(thumbBitmap);            }            mVideoView.setVideoPath(mMediaObject.getOutputVideoPath());        }        /* (non-Javadoc)         */        @Override        protected Void doInBackground(Void... params) {            while(count <= 50){                count += 2;                publishProgress(count);                try {                    Thread.sleep(100);                } catch (InterruptedException e) {                    // TODO Auto-generated catch block                    e.printStackTrace();                }            }            return null;        }        /* (non-Javadoc)         */        @Override        protected void onProgressUpdate(Integer... values) {            mProgressView.setProgress(values[0]);        }        /* (non-Javadoc)         */        @Override        protected void onPostExecute(Void result) {            count = 0;            mProgressView.setVisibility(View.GONE);            mThumbView.setVisibility(View.GONE);            mVideoView.start();        }    }}

依次简单说下，VideoView允许我们监听到三个状态分别是：OnPrepared、OnCompletion和OnError对应的就是：完成准备、播放完成和播放出错。如果之前了解MediaPlayer状态机，那么会发现：VideoView这三个状态相对来说真是非常简洁。当然，正式的VideoView还会添加一个MediaPlayerControl用于控制视频的播放、暂停、控制播放进度。因为我们的需求很简单，所以就没有用到它。

那么，进入实现流程：在获取到控件以及MediaObject对象后，我们实现一个AsyncTask来模拟视频加载的任务：onPreExcute()中，我们先将之前保存好的视频预览图取出（实际上就是在视频录制完成后对视频文件第一帧的截图），并初始化到ImageView中去，然后将视频文件的path路径设置到VideoView中去。

doInBackground(...)中，就是简单模拟下加载进度了，不要忘了调用publishProgress()就行。

onProgressUpdate(...)，更新我们的ProgressView。

onPostExecute(...)中，将进度条和预览图都隐藏掉，调用VideoView.start()即可。

当然不要忘了执行我们的Task，循环播放就是在每次OnCompletion中重新start()就好，并且统计下播放完成的次数，如果大于等于1了就可以提示点击取消了，onTouch就好。

纵然这么简单，也不能忘记我们粗糙的进度条：

public class CircleProgressView extends View {    private Paint mOutSidePaint;    private Paint mInsidePaint;    private int mMax = 1;    private int mProgress;    private float mCenterX;    private float mCenterY;    private RectF mOutSideCircleRectF = new RectF();    private RectF mInSideCircleRectF = new RectF();    private int mOutSideRadius = DisplayUtil.dip2px(getContext(), 30);    private int mInSideRadius = DisplayUtil.dip2px(getContext(), 28);    public CircleProgressView(Context context){        this(context, null);    }    public CircleProgressView(Context context, AttributeSet attrs) {        super(context, attrs);          initPaint();    }    private void initPaint() {        // TODO Auto-generated method stub        mOutSidePaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mOutSidePaint.setColor(Color.LTGRAY);        mOutSidePaint.setStrokeWidth(2.0f);        mOutSidePaint.setStyle(Paint.Style.STROKE);        mInsidePaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mInsidePaint.setColor(Color.LTGRAY);        mInsidePaint.setStyle(Paint.Style.FILL);    }    /* (non-Javadoc)     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);//      super.measure(widthMeasureSpec, heightMeasureSpec);//      setMeasuredDimension(measure(widthMeasureSpec, true), measure(heightMeasureSpec, false));        calculateCircleCenter();        calculateDrawRectF();    }    ///*  private int measure(int measureSpec, boolean isWidth) {        int result;        int mode = MeasureSpec.getMode(measureSpec);        int size = MeasureSpec.getSize(measureSpec);        int padding = isWidth ? getPaddingLeft() + getPaddingRight()                : getPaddingTop() + getPaddingBottom();        if (mode == MeasureSpec.EXACTLY) {            result = size;        } else {            result = isWidth ? getSuggestedMinimumWidth() : getSuggestedMinimumHeight();            result += padding;            if (mode == MeasureSpec.AT_MOST) {                result = Math.min(result, size);            }        }        return result;    }*/    private void calculateCircleCenter() {        mCenterX = (getWidth() - getPaddingLeft() - getPaddingRight()) / 2.0f                + getPaddingLeft();        mCenterY = (getHeight() - getPaddingTop() - getPaddingBottom()) / 2.0f                + getPaddingTop();    }    private void calculateDrawRectF() {        mOutSideCircleRectF.left = mCenterX - mOutSideRadius;        mOutSideCircleRectF.top = mCenterY - mOutSideRadius;        mOutSideCircleRectF.right = mCenterX + mOutSideRadius;        mOutSideCircleRectF.bottom = mCenterY + mOutSideRadius;        mInSideCircleRectF.left = mCenterX - mInSideRadius;        mInSideCircleRectF.top = mCenterY - mInSideRadius;        mInSideCircleRectF.right = mCenterX + mInSideRadius;        mInSideCircleRectF.bottom = mCenterY + mInSideRadius;    }    /*      *      */    @Override    protected void onDraw(Canvas canvas) {        canvas.save();        //画外圈        canvas.drawCircle(mCenterX, mCenterY, mOutSideRadius, mOutSidePaint);//      //画内圈        canvas.drawArc(mInSideCircleRectF, -90,                mProgress * 360 / mMax, true, mInsidePaint);        canvas.restore();    }    public void setMax(int max){        this.mMax = max;    }    public void setProgress(int progress){        this.mProgress = progress;        invalidate();    }}

OK，大功告成。

优化

关于优化，这里先说下我的思路，因为还没有具体实现… 等具体实现好了，我再回来补充。

说是优化，其实是换一种实现方式，因为在使用VideoView时,发现其许多的功能点在我们需求分析中都运用不上，类似MediaPlayerControl以及seekTo()等等都是可以“咔擦”掉的。

那么就来看看VideoView是怎么实现的，实际上他就是一个SurfaceView的子类，内部视频播放功能其实是靠MediaPlayer来完成的，暴露出的那三个状态也正是MediaPlayer状态机中三个重要的状态，这里附张图，给自己巩固和加深下印象：

详细介绍在这里：Android MediaPlayer状态机
通过自己的实现，可以更多的去监听状态从而处理一些业务。

大体的思路如下：
继承SurfaceView并且实现其Callback接口
一样的定义一些状态码：

    // all possible internal states    private static final int STATE_ERROR              = -1;    private static final int STATE_IDLE               = 0;    private static final int STATE_PREPARING          = 1;    private static final int STATE_PREPARED           = 2;    private static final int STATE_PLAYING            = 3;    private static final int STATE_PAUSED             = 4;    private static final int STATE_PLAYBACK_COMPLETED = 5;

同样用两个变量来控制状态：

    private int mCurrentState = STATE_IDLE;    private int mTargetState  = STATE_IDLE;

以及其他的变量：

...    private int mVideoWidth;    private int mVideoHeight;...

初始化View：

    protected void initVideoView() {        mVideoWidth = 0;        mVideoHeight = 0;        ...        mCurrentState = STATE_IDLE;        mTargetState = STATE_IDLE;    }

在设置Path的时候进入到Prepared状态：

    public void setVideoPath(String path) {    ...        if (StringUtils.isNotEmpty(path)) {            mTargetState = STATE_PREPARED;            openVideo(Uri.parse(path));        }    }public void openVideo(Uri uri) {        Exception exception = null;        try {            if (mMediaPlayer == null) {            ...            //这里初始化设置我们的mMediaPlayer，设置监听            mMediaPlayer = new MediaPlayer();            mMediaPlayer.setOnPreparedListener(mPreparedListener);            mMediaPlayer.setOnCompletionListener(mCompletionListener);            mMediaPlayer.setOnErrorListener(mErrorListener);            mMediaPlayer.setOnVideoSizeChangedListener(mVideoSizeChangedListener);            ...            } else {                mMediaPlayer.reset();            }            mMediaPlayer.setDataSource(getContext(), uri);            mMediaPlayer.prepareAsync();            mCurrentState = STATE_PREPARING;        }         ...        } catch (Exception ex) {            exception = ex;        }        if (exception != null) {        //捕获到异常，切换状态            mCurrentState = STATE_ERROR;            if (mErrorListener != null)                mErrorListener.onError(mMediaPlayer, MediaPlayer.MEDIA_ERROR_UNKNOWN, 0);        }    }

对MediaPlayer的Prepared状态监听：

    MediaPlayer.OnPreparedListener mPreparedListener = new MediaPlayer.OnPreparedListener() {        @Override        public void onPrepared(MediaPlayer mp) {            //必须是正常状态            if (mCurrentState == STATE_PREPARING) {            ...                mCurrentState = STATE_PREPARED;                mVideoWidth = mp.getVideoWidth();                mVideoHeight = mp.getVideoHeight();            ...                switch (mTargetState) {                case STATE_PREPARED:                //这里是我们向外暴露的Prepared状态                    if (mOnPreparedListener != null)                        mOnPreparedListener.onPrepared(mMediaPlayer);                    break;                case STATE_PLAYING:                    start();                    break;                }            }        }    };

对MediaPlayerOnCompletion的监听：

    private MediaPlayer.OnCompletionListener mCompletionListener = new MediaPlayer.OnCompletionListener() {        @Override        public void onCompletion(MediaPlayer mp) {            mCurrentState = STATE_PLAYBACK_COMPLETED;            if (mOnCompletionListener != null)            //这里我们向外暴露OnCompletion状态                mOnCompletionListener.onCompletion(mp);        }    };

对MediaPlayerVideoSizeChange的监听：

    OnVideoSizeChangedListener mVideoSizeChangedListener = new OnVideoSizeChangedListener() {        @Override        public void onVideoSizeChanged(MediaPlayer mp, int width, int height) {            mVideoWidth = width;            mVideoHeight = height;            ...    };

对MediaPlayerOnError的监听：

    private MediaPlayer.OnErrorListener mErrorListener = new MediaPlayer.OnErrorListener() {        @Override        public boolean onError(MediaPlayer mp, int framework_err, int impl_err) {        ...            mCurrentState = STATE_ERROR;            if (mOnErrorListener != null)            //这里我们向外暴露onError状态                mOnErrorListener.onError(mp, framework_err, impl_err);            return true;        ...        }    };

start()方法：

    public void start() {        mTargetState = STATE_PLAYING;        //这里可用状态包括{Prepared, Started, Paused, PlaybackCompleted}        if (mMediaPlayer != null && (mCurrentState == STATE_PREPARED || mCurrentState == STATE_PAUSED || mCurrentState == STATE_PLAYING || mCurrentState == STATE_PLAYBACK_COMPLETED)) {            try {                if (!isPlaying())                    mMediaPlayer.start();                mCurrentState = STATE_PLAYING;                ...            } catch (IllegalStateException e) {                ...            } catch (Exception e) {                ...            }        }    }

最后release()方法：

    public void release() {        mTargetState = STATE_IDLE;        mCurrentState = STATE_IDLE;        if (mMediaPlayer != null) {            try {                ...                mMediaPlayer.stop();                mMediaPlayer.release();            } catch (IllegalStateException e) {                ...            } catch (Exception e) {                ...            }            mMediaPlayer = null;        }    }

以上是个大体的思路，非常有可能不完善，只是简单走完状态机中主要的状态。

然后，回到一开始说到的界面上的瑕疵，解决思路其实就是重写SurfaceView的onMeasure()方法，我们可以看到系统在重写’onMeasure()’方法是做了许多情况的判断，这里就不列举出来了。而针对我们这种固定的需求，因为前面获取到了mVideoWidth、mVideoHeight两个变量，运用起它们，大致是：

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        ...        //这里省去了对MeasureSpec三个状态的判断        int width = DisplayUtil.getScreenWidth();        int height = (int)((mVideoWidth/mVideoHeight *1.0f) * width);        setMeasuredDimension(width, height);        ...    }

结语

总的来说，整个的实现过程中必然会存在多少瑕疵，也许以上的优化方面并不会为整个功能带来性能上的改变，反而在调用系统的控件获得的是稳定的体验。但是了解其实现原理，则是必不可少的，蛤蛤。OK，播放功能先暂时就这样。

Android仿微信小视频录制功能（二）

Android仿微信小视频录制功能（二）

需求

实现

优化

结语

更多相关文章

随机推荐