Android自定义视频播放器

在我的博客Android控件–VideoView中介绍了如何用VideoView去播放本地视频和网络视频，不过我们播放视频是调用的是系统给我们的UI界面，所以这篇博客是介绍如何去定制自己的播放器。

我们的UI布局就是实现成这个样子，在横屏的时候有音量的显示，竖屏的时候则会隐藏。另外还可以在画面上滑动实现音量和亮度的变化。我们先来实现布局样式。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ht.videoplayerdemo.MainActivity" >

    <RelativeLayout
        android:id="@+id/videoLayout"
        android:layout_width="match_parent"
        android:layout_height="240dp" >

        <com.ht.videoplayerdemo.CustomVideoView
            android:id="@+id/video"
            android:layout_width="match_parent"
            android:layout_height="240dp" />

        <include layout="@layout/layout_progress"/>

        <LinearLayout
            android:id="@+id/controllerbar_layout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:orientation="vertical" >

            <SeekBar
                android:id="@+id/play_seek"
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:layout_marginLeft="-20dp"
                android:layout_marginRight="-20dp"
                android:indeterminate="false"
                android:max="100"
                android:progress="20"
                android:progressDrawable="@drawable/seekbar_style2"
                android:thumb="@null" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#101010"
                android:gravity="center_vertical" >

                <LinearLayout
                    android:id="@+id/left_layout"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:orientation="horizontal" >

                    <ImageView
                        android:id="@+id/pause_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="16dp"
                        android:src="@drawable/pause_btn_style" />

                    <TextView
                        android:id="@+id/time_current_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="8dp"
                        android:text="00:00:00"
                        android:textColor="#ffffff"
                        android:textSize="14sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:text="/"
                        android:textColor="#4c4c4c"
                        android:textSize="14sp" />

                    <TextView
                        android:id="@+id/time_total_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:text="00:00:00"
                        android:textColor="#4c4c4c"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="10dp"
                    android:layout_height="match_parent"
                    android:layout_alignParentRight="true"
                    android:layout_toRightOf="@id/left_layout"
                    android:gravity="center_vertical|right"
                    android:orientation="horizontal" >

                    <ImageView 
                        android:id="@+id/volume_img"
                        android:visibility="gone"
                        android:src="@drawable/sound"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"/>

                    <SeekBar 
                        android:id="@+id/volume_seek"
                        android:visibility="gone"
                        android:indeterminate="false"
                        android:thumb="@null"
                        android:progressDrawable="@drawable/seekbar_style"
                        android:progress="20"
                        android:max="100"
                        android:layout_width="100dp"
                        android:layout_height="5dp"/>

                    <View 
                        android:background="#1E1E1E"
                        android:layout_marginLeft="32dp"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:layout_width="1dp"
                        android:layout_height="match_parent"/>

                    <ImageView
                        android:id="@+id/screen_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="4dp"
                        android:layout_marginRight="4dp"
                        android:src="@drawable/expand" />

                </LinearLayout>
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

最外层的RelativeLayout是整个布局，里面一层就是我们要完成的自定义播放器的layout，默认是竖屏所以起初高度是240dp，CustomVideoView是要自定义的VideoView，在显示上是和VideoView一样的。layout_progress是我们在触发滑动事件改变音量或亮度是出现的布局。

<?xml version="1.0" encoding="u