使用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"

                style="@android:style/Widget.Holo.SeekBar"

                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"

        style="@android:style/Widget.Holo.ProgressBar.Small"/>

    <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>

好了，整个控件到这里就完成了，源码下载请戳它—>欢迎戳我

如果你觉得有对你有帮助，请动动手给个赞吧，有问题记得反馈给我哦！

正文

介绍

效果图

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)

public void setOnPreparedListener (MediaPlayer.OnPreparedListener l)

public void setVideoURI (Uri uri)

public void start ()

getHolder().setFixedSize(width,height);

自定义播放器思路

具体实现

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

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

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

1、onTouch里的实现快进快退

2、处理 seekBar的拖动事件

3、videoView的回调事件

4、控件的使用

相关阅读

谷歌浏览器html5播放器，谷歌浏览器设置html播放器

html5插播音乐，html5音乐播放器

html5js自定义播放器，html5自动播放

jqueryhtml5音频播放器样式的简单介绍

简易音乐播放器安卓，简易音乐播放器android

html5播放器和flash，html5播放器和flash差别

手机播放器app安卓下载，手机播放器app安卓下载

html5背景音乐插件，html5音乐播放器

目录[+]