Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> 使用VideoView自定義一個播放器控件，videoview控件

使用VideoView自定義一個播放器控件，videoview控件

編輯：關於android開發

使用VideoView自定義一個播放器控件，videoview控件

介紹

最近要使用播放器做一個簡單的視頻播放功能，開始學習VideoView,在橫豎屏切換的時候碰到了點麻煩，不過在查閱資料後總算是解決了。在寫VideoView播放視頻時候定義控制的代碼全寫在Actvity裡了，寫完一看我靠代碼好亂，於是就寫了個自定義的播放器控件，支持指定大小，可以橫豎屏切換，手動左右滑動快進快退。好了，下面開始。

效果圖

效果圖有點卡，我也不知道為啥。。。。。
這裡寫圖片描述

VideoView介紹

這個是我們實現視頻播放最主要的控件，詳細的介紹大家百度就去看，這裡介紹幾個常用的方法。

用於播放視頻文件。 VideoView 類可以從不同的來源（例如資源文件或內容提供器）讀取圖像，計算和維護視頻的畫面尺寸以使其適用於任何布局管理器，並提供一些諸如縮放、著色之類的顯示選項。

VideoView 常用的幾個方法

public int getDuration ()

獲得所播放視頻的總時間

public int getCurrentPosition ()

獲得當前的位置,我們可以用來設置播放時間的顯示

public int getCurrentPosition ()

獲得當前的位置,我們可以用來設置播放時間的顯示

public int pause ()

暫停播放

public int seekTo ()

設置播放位置，我們用來總快進的時候就能用到

public int setOnCompletionListener(MediaPlayer.OnCompletionListener l)

注冊在媒體文件播放完畢時調用的回調函數。

public int setOnErrorListener (MediaPlayer.OnErrorListener l)

注冊在設置或播放過程中發生錯誤時調用的回調函數。如果未指定回調函數，或回調函數返回false，會彈一個dialog提示用戶不能播放

public void setOnPreparedListener (MediaPlayer.OnPreparedListener l)

注冊在媒體文件加載完畢，可以播放時調用的回調函數。

public void setVideoURI (Uri uri)

設置播放的視頻源，也可以用setVideoPath指定本地文件

public void start ()

開始播放

getHolder().setFixedSize(width,height);

設置VideoView的分辨率，如果我們的VideoView在開始播放的時候是豎屏的，當橫屏的時候我們改變了VideoView的布局大小，就需要這個方法重新設置它的分辨率，否則你會發現改變了之後VideoView內部的視頻部分還是原來的大小，這點要注意。

自定義播放器思路

說是自定義，其實無非就是把這些VideoView和用來顯示的其它控件結合在一起，然後在內部處理它的事件交互，我們要做的就是以下幾步：1、寫好整個空間的布局。2、在自定義控件的內部獲取到整個控件內部的各個小控件，並且為它們設置一些初始化事件。3、根據你自己的邏輯和想實現的效果在裡面寫自己的事件處理，需要在和外部進行交互就提供方法和接口咯。最後就是使用測試效果了。好了，我們就跟著這裡說的4步去實現吧！

具體實現

1、第一步，寫自己的布局文件

想要的效果就是在底部放一個狀態欄顯示時間等信息，播放進度，進入全屏，中間放一個快進快退的狀態，布局代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="beforeDescendants">
    <com.qiangyu.test.commonvideoview.MyVideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

     //底部狀態欄
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#CC282828"
        android:padding="3dip"
        android:id="@+id/videoControllerLayout"
        android:gravity="center"
        android:layout_gravity="bottom">
        <LinearLayout android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:id="@+id/videoPauseBtn"
            android:paddingRight="10dip"
            android:paddingLeft="10dp">
            <ImageView android:layout_width="22dp"
                android:layout_height="22dp"
                android:id="@+id/videoPauseImg" />
        </LinearLayout>
        <LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingRight="0dip">

            <SeekBar android:layout_width="fill_parent"
                android:id="@+id/videoSeekBar"
                android:layout_weight="1"
                
                android:layout_height="wrap_content"/>
            <TextView android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:text="00:00"
                android:textSize="12dp"
                android:id="@+id/videoCurTime"
                android:textColor="#FFF"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="12dp"
                android:textColor="#FFF"
                android:text="/"/>
            <TextView android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:text="00:00"
                android:textSize="12dp"
                android:id="@+id/videoTotalTime"
                android:textColor="#FFF"
                android:layout_marginRight="10dp"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/screen_status_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center">
            <ImageView
                android:id="@+id/screen_status_img"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/iconfont_enter_32"/>
        </LinearLayout>
    </LinearLayout>

    //VideoVIEW中間的開始按鈕和進度條以及快進快退的提示
    <ProgressBar android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/progressBar"
        />
    <ImageView android:layout_width="30dip"
        android:layout_height="30dip"
        android:id="@+id/videoPlayImg"
        android:layout_gravity="center"
        android:src="@mipmap/video_box_play"/>
    <LinearLayout
        android:id="@+id/touch_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:visibility="invisible"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:background="#000">
        <ImageView android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:id="@+id/touchStatusImg"/>
        <TextView
            android:id="@+id/touch_time"
            android:layout_width="wrap_content"
            android:text="25:00/59:00"
            android:textSize="12sp"
            android:textColor="#fff"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</FrameLayout>

上面的布局很簡單，VideoView用了自定義是因為當布局改變的時候，要讓VideoView重新獲取布局位置，在裡面設置它的分辨率為全屏.VideoView的代碼如下

public class MyVideoView extends VideoView {

    public MyVideoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyVideoView(Context context) {
        super(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int width = getDefaultSize(0, widthMeasureSpec);
        int height = getDefaultSize(0, heightMeasureSpec);
        this.getHolder().setFixedSize(width,height);//設置分辨率
        setMeasuredDimension(width, height);
    }

}

好，布局寫好了我來第二步，獲取內部控件初始化事件

2、第二步，onFinishInflate()中得到內部的控件，做初始化工作

onFinishInflate方法在xml解析完畢的時候會回調該方法，一般在做組合控件的時候最常用

@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        initView();
    }

private void initView() {
        View view = LayoutInflater.from(context).inflate(R.layout.common_video_view,null);
        viewBox = (FrameLayout) view.findViewById(R.id.viewBox);
        videoView = (MyVideoView) view.findViewById(R.id.videoView);
        videoPauseBtn = (LinearLayout) view.findViewById(R.id.videoPauseBtn);
        screenSwitchBtn = (LinearLayout) view.findViewById(R.id.screen_status_btn);
        videoControllerLayout = (LinearLayout) view.findViewById(R.id.videoControllerLayout);
        touchStatusView = (LinearLayout) view.findViewById(R.id.touch_view);
        touchStatusImg = (ImageView) view.findViewById(R.id.touchStatusImg);
        touchStatusTime = (TextView) view.findViewById(R.id.touch_time);
        videoCurTimeText = (TextView) view.findViewById(R.id.videoCurTime);
        videoTotalTimeText = (TextView) view.findViewById(R.id.videoTotalTime);
        videoSeekBar = (SeekBar) view.findViewById(R.id.videoSeekBar);
        videoPlayImg = (ImageView) view.findViewById(R.id.videoPlayImg);
        videoPlayImg.setVisibility(GONE);
        videoPauseImg = (ImageView) view.findViewById(R.id.videoPauseImg);
        progressBar = (ProgressBar) view.findViewById(R.id.progressBar);

        videoPauseBtn.setOnClickListener(this);
        videoSeekBar.setOnSeekBarChangeListener(this);
        videoPauseBtn.setOnClickListener(this);
        videoView.setOnPreparedListener(this);
        videoView.setOnCompletionListener(this);
        screenSwitchBtn.setOnClickListener(this);
        videoPlayImg.setOnClickListener(this);
        //注冊在設置或播放過程中發生錯誤時調用的回調函數。如果未指定回調函數，或回調函數返回false，VideoView 會通知用戶發生了錯誤。
        videoView.setOnErrorListener(this);
        viewBox.setOnTouchListener(this);
        viewBox.setOnClickListener(this);
        addView(view);
    }

很簡單的做了代碼初始化和videoView的播放事件的注冊，這裡的事件待會要處理的有viewBox.setOnTouchListener(this)注冊的onTouch事件，我們要在裡面寫左右滑動快進快退的效果，videoSeekBar.setOnSeekBarChangeListener(this);處理拖動seekbar快進快退。

3、第三步，事件、效果處理

viewBox.setOnTouchListener(this);

1、onTouch裡的實現快進快退

@Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //沒播放的時候不處理
                if (!videoView.isPlaying()){
                    return false;
                }
                float downX =  event.getRawX();
                touchLastX = downX;
                Log.d("FilmDetailActivity", "downX" + downX);
                //保存當前播放的位置用與做事件顯示
                this.position = videoView.getCurrentPosition();
                break;
            case MotionEvent.ACTION_MOVE:
                //沒播放的時候不處理
                if (!videoView.isPlaying()){
                    return false;
                }
                float currentX =  event.getRawX();
                float deltaX = currentX - touchLastX;
                float deltaXAbs  =  Math.abs(deltaX);
                if (deltaXAbs>1){//正向移動，快進
                    if (touchStatusView.getVisibility()!=View.VISIBLE){
                        touchStatusView.setVisibility(View.VISIBLE);
                        //顯示快進的時間view
                    }
                    touchLastX = currentX;
                    Log.d("FilmDetailActivity","deltaX"+deltaX);
                    if (deltaX > 1) {
                        position += touchStep;
                        if (position > duration) {
                            position = duration;
                        }
                        touchPosition = position;
                        touchStatusImg.setImageResource(R.mipmap.ic_fast_forward_white_24dp);
                        int[] time = getMinuteAndSecond(position);
                        touchStatusTime.setText(String.format("%02d:%02d/%s", time[0], time[1],formatTotalTime));
                    } else if (deltaX < -1) {//快退
                        position -= touchStep;
                        if (position < 0) {
                            position = 0;
                        }
                        touchPosition = position;
                        touchStatusImg.setImageResource(R.mipmap.ic_fast_rewind_white_24dp);
                        int[] time = getMinuteAndSecond(position);
                        touchStatusTime.setText(String.format("%02d:%02d/%s", time[0], time[1],formatTotalTime));
                        //mVideoView.seekTo(position);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                if (touchPosition!=-1){
                    videoView.seekTo(touchPosition);
//放開手指的時候快進或快退到滑動決定的時間位置                    touchStatusView.setVisibility(View.GONE);
                    touchPosition = -1;
                    if (videoControllerShow){
                        return true;
                    }
                }
                break;
        }
        return false;
    }

2、處理 seekBar的拖動事件

@Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        int[] time = getMinuteAndSecond(progress);
        videoCurTimeText.setText(String.format("%02d:%02d", time[0], time[1]));
        //設置底部時間顯示
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        videoView.pause();
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        videoView.seekTo(videoSeekBar.getProgress());
        videoView.start();
        videoPlayImg.setVisibility(View.INVISIBLE);
        videoPauseImg.setImageResource(R.mipmap.icon_video_pause)；
       //拖動之後到指定的時間位置
    }

3、videoView的回調事件

@Override
    public void onPrepared(MediaPlayer mp) {
        duration = videoView.getDuration();
        int[] time = getMinuteAndSecond(duration);
        videoTotalTimeText.setText(String.format("%02d:%02d", time[0], time[1]));
        formatTotalTime = String.format("%02d:%02d", time[0], time[1]);
        videoSeekBar.setMax(duration);
        progressBar.setVisibility(View.GONE);


        mp.start();
        videoPauseBtn.setEnabled(true);
        videoSeekBar.setEnabled(true);

        videoPauseImg.setImageResource(R.mipmap.icon_video_pause);
        timer.schedule(timerTask, 0, 1000);
            //初始化總時間等一些界面顯示，同時用timer定時去修改時間進度textView
    }

    @Override
    public void onCompletion(MediaPlayer mp) {
        videoView.seekTo(0);
        videoSeekBar.setProgress(0);
        videoPauseImg.setImageResource(R.mipmap.icon_video_play);
        videoPlayImg.setVisibility(View.VISIBLE);
    }

還有一些其它的點擊時間就不放了，都是暫停，播放，點擊顯示隱藏底部狀態欄，全屏切換等的事件。到了這裡我們的事件處理完畢啦，接下來就要我們視頻怎麼播放呢？為了播放我們為外部提供一個方法

//開始播放
public void start(String url){
        videoPauseBtn.setEnabled(false);
        videoSeekBar.setEnabled(false);
        videoView.setVideoURI(Uri.parse(url));
        videoView.start();
    }


//進入全屏時候調用
public void setFullScreen(){
        touchStatusImg.setImageResource(R.mipmap.iconfont_exit);
        this.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        videoView.requestLayout();
    }

//退出全屏時候調用
    public void setNormalScreen(){
        touchStatusImg.setImageResource(R.mipmap.iconfont_enter_32);
        this.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,400));
        videoView.requestLayout();
    }

上面提供的setFullScreen()和setNormalScreen()需要在Activity的 onConfigurationChanged(Configuration newConfig)橫豎屏發生改變的回調方法裡面調用，還需要注意的是我這裡寫的是LinearLayout的LayoutParams，所以我們自定義的view的父空間要是LinearLayout，當然你也可以修改。

4、控件的使用

我們只需要在獲得空間調用start方法，然後在onConfigurationChanged方法裡調用setFullScreen和setNormalScreen就可以了，

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.qiangyu.test.commonvideoview.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <com.qiangyu.test.commonvideoview.CommonVideoView
        android:id="@+id/common_videoView"
        android:layout_width="match_parent"
        android:layout_height="300dp" />
</LinearLayout>

activity代碼

public class MainActivity extends AppCompatActivity {

    CommonVideoView videoView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        videoView = (CommonVideoView) findViewById(R.id.common_videoView);
        videoView.start("你的服務器視頻地址");
    }



    @Override public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            videoView.setFullScreen();
        }else {
            videoView.setNormalScreen();
        }
    }
}

最後為了防止你的Activity在橫豎屏切換的時候重新創建別忘記在AndroidManifest.xml文件裡面配置
android:configChanges=”orientation|screenSize|screenLayout”，如果你這裡有疑惑可以參考我的文章–>深入了解Activity－生命周期

<activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar"
            android:configChanges="orientation|screenSize|screenLayout">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

好了，整個控件到這裡就完成了，源碼下載請戳它—>歡迎戳我

如果你覺得有對你有幫助，請動動手給個贊吧，有問題記得反饋給我哦！

關於android開發

開發入門初級開發中級開發高級開發關於android開發

相關文章