TextureView+MediaPlayer实现在线短视频播放

Android多媒体开发系列文章

• Android多媒体开发：录音机
• Android多媒体开发：照相机
• TextureView+MediaPlayer实现在线短视频播放
• Android多媒体开发：第三方框架

TextureView+MediaPlayer实现在线短视频播放

列表item布局文件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><FrameLayout android:layout_width="match_parent"android:layout_height="wrap_content"><ImageView android:id="@+id/iv_bg"android:layout_width="match_parent"android:layout_height="200dp"android:scaleType="centerCrop"android:src="@mipmap/beautiful"android:visibility="visible"/><com.jackchan.videoplayer.view.VideoPlayer android:id="@+id/videoPlayer"android:layout_width="match_parent"android:layout_height="200dp"android:visibility="visible"/></FrameLayout><LinearLayout android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical"android:orientation="horizontal"android:padding="10dp"><ImageView android:id="@+id/iv_author"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/qq_allshare_normal"/><TextView android:id="@+id/tv_author_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:text="飞行的钢蛋儿"android:textColor="#000"/><TextView android:id="@+id/tv_play_count"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_weight="1"android:text="109万次播放"android:textColor="#8b8787"/><ImageView android:id="@+id/iv_comment"android:layout_width="20dp"android:layout_height="20dp"android:layout_marginRight="2dp"android:background="@drawable/comment_video_normal"/><TextView android:id="@+id/tv_comment_count"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:text="3940"android:textColor="#8b8787"/><ImageView android:id="@+id/iv_comment_more"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/more_pgc_comment_normal_night"/></LinearLayout></LinearLayout>

其中VideoPlayer是自定义View，继承于RelativeLayout，是视频播放的关键类

VideoPlayer

public VideoPlayer(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initView();}//初始化布局private void initView() {View view = View.inflate(getContext(), R.layout.video_play, this);ButterKnife.bind(this,view);...} <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><!--视频播放界面--><TextureView android:id="@+id/video_view"android:layout_width="match_parent"android:layout_height="200dp"android:visibility="visible"/><!--视频播放控制界面--><com.jackchan.videoplayer.view.VideoMediaController android:id="@+id/mediaController"android:layout_width="match_parent"android:layout_height="wrap_content"/></RelativeLayout>

实现视频播放功能的是TextureView，VideoMediaController视频播放控制器，自定义View，继承于RelativeLayout

视频播放（视频的初始化）

private void play(String url){try {mPlayer = MediaHelper.getInstance();mPlayer.reset();mPlayer.setDataSource(url);//让MediaPlayer和TextureView进行视频画面的结合mPlayer.setSurface(mSurface);//设置监听mPlayer.setOnBufferingUpdateListener(onBufferingUpdateListener);mPlayer.setOnCompletionListener(onCompletionListener);mPlayer.setOnErrorListener(onErrorListener);mPlayer.setOnPreparedListener(onPreparedListener);mPlayer.setScreenOnWhilePlaying(true);//在视频播放的时候保持屏幕的高亮//异步准备mPlayer.prepareAsync();} catch (Exception e) {e.printStackTrace();}}

准备完成监听

private MediaPlayer.OnPreparedListener onPreparedListener = new MediaPlayer.OnPreparedListener() {@Overridepublic void onPrepared(MediaPlayer mp) {//隐藏视频加载进度条mediaController.setPbLoadingVisiable(View.GONE);//进行视频的播放MediaHelper.play();hasPlay = true;//隐藏标题mediaController.delayHideTitle();//设置视频的总时长mediaController.setDuration(mPlayer.getDuration());//更新播放的时间和进度mediaController.updatePlayTimeAndProgress();}};

进行TextureView控件创建的监听

videoView.setSurfaceTextureListener(surfaceTextureListener); private TextureView.SurfaceTextureListener surfaceTextureListener = new TextureView.SurfaceTextureListener() {//创建完成 TextureView才可以进行视频画面的显示@Overridepublic void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {// Log.i(TAG,"onSurfaceTextureAvailable");mSurface = new Surface(surface);//连接对象（MediaPlayer和TextureView）play(info.url);}@Overridepublic void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {// Log.i(TAG,"onSurfaceTextureSizeChanged");}@Overridepublic boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {// Log.i(TAG,"onSurfaceTextureDestroyed");return true;}@Overridepublic void onSurfaceTextureUpdated(SurfaceTexture surface) {// Log.i(TAG,"onSurfaceTextureUpdated");}};

VideoMediaController

布局文件如下

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="200dp"><!--视频加载进度条--><ProgressBar android:id="@+id/pb_loading"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:visibility="gone"/><RelativeLayout android:id="@+id/rl_play_finish"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#b4000000"android:visibility="visible"><LinearLayout android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:orientation="horizontal"><LinearLayout android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="20dp"android:orientation="vertical"><ImageView android:id="@+id/iv_replay"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/replay_video"/><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5dp"android:text="重播"android:textColor="#fff"android:textSize="14sp"/></LinearLayout><LinearLayout android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><ImageView android:id="@+id/iv_share"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/share_video"/><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5dp"android:text="分享"android:textColor="#fff"android:textSize="14sp"/></LinearLayout></LinearLayout></RelativeLayout><TextView android:id="@+id/tv_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:gravity="center"android:text="@string/title"android:textColor="#fff"android:textSize="14sp"/><ImageView android:id="@+id/iv_play"android:layout_width="50dp"android:layout_height="50dp"android:layout_gravity="center"android:src="@drawable/new_play_video"android:visibility="visible"/><TextView android:id="@+id/tv_all_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:layout_margin="10dp"android:background="@drawable/tv_time_bg"android:paddingBottom="5dp"android:paddingLeft="10dp"android:paddingRight="10dp"android:paddingTop="5dp"android:text="02:30"android:textColor="#fff"android:textSize="10sp"android:visibility="visible"/><LinearLayout android:id="@+id/ll_play_control"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="#ca000000"android:gravity="center_vertical"android:padding="10dp"android:visibility="visible"><TextView android:id="@+id/tv_use_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:text="00:00"android:textColor="#fff"android:textSize="10sp"/><SeekBar android:id="@+id/seekBar"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:layout_weight="1"android:progressDrawable="@drawable/sb_progress_drawable"android:thumb="@drawable/biz_video_progress_thumb"/><TextView android:id="@+id/tv_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:text="02:30"android:textColor="#fff"android:textSize="10sp"/><ImageView android:id="@+id/iv_fullscreen"android:layout_width="20dp"android:layout_height="20dp"android:src="@drawable/enlarge_fullscreen"/></LinearLayout> </FrameLayout>

显示或者隐藏视频控制界面

private void showOrHideVideoController() {if(llPlayControl.getVisibility() == View.GONE){//显示（标题、播放按钮、视频进度控制）tvTitle.setVisibility(View.VISIBLE);ivPlay.setVisibility(View.VISIBLE);//加载动画Animation animation = AnimationUtils.loadAnimation(getContext(),R.anim.bottom_enter);animation.setAnimationListener(new SimpleAnimationListener(){@Overridepublic void onAnimationEnd(Animation animation) {super.onAnimationEnd(animation);llPlayControl.setVisibility(View.VISIBLE);//过2秒后自动隐藏mHandler.sendEmptyMessageDelayed(MSG_HIDE_CONTROLLER,2000);}});//执行动画llPlayControl.startAnimation(animation);}else{//隐藏（标题、播放按钮、视频进度控制）tvTitle.setVisibility(View.GONE);ivPlay.setVisibility(View.GONE);//加载动画Animation animation = AnimationUtils.loadAnimation(getContext(),R.anim.bottom_exit);animation.setAnimationListener(new SimpleAnimationListener(){@Overridepublic void onAnimationEnd(Animation animation) {super.onAnimationEnd(animation);llPlayControl.setVisibility(View.GONE);}});//执行动画llPlayControl.startAnimation(animation);}}

更新播放的时间和进度

public void updatePlayTimeAndProgress() {//获取目前播放的进度int currentPosition = MediaHelper.getInstance().getCurrentPosition();//格式化String useTime = formatDuration(currentPosition);tvUseTime.setText(useTime);//更新进度int duration = MediaHelper.getInstance().getDuration();if(duration == 0){return;}int progress = 100*currentPosition/duration;seekBar.setProgress(progress);//发送一个更新的延时消息mHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME_PROGRESS,500);}

自定义SeekBar

<SeekBar android:id="@+id/seekBar"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:layout_weight="1"android:progressDrawable="@drawable/sb_progress_drawable"android:thumb="@drawable/biz_video_progress_thumb"/>

sb_progress_drawable

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@android:id/background"android:drawable="@drawable/sb_bg"/><item android:id="@android:id/secondaryProgress"><scale android:scaleWidth="100%"><selector><item android:state_enabled="false"><color android:color="@android:color/transparent"/></item><item android:drawable="@drawable/sb_second"/></selector></scale></item><item android:id="@android:id/progress"><scale android:scaleWidth="100%"><selector><item android:state_enabled="false"><color android:color="@android:color/transparent"/></item><item android:drawable="@drawable/sb_progress"/></selector></scale></item> </layer-list>

列表的item滚动出屏幕时停止播放

private RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {@Overridepublic void onScrollStateChanged(RecyclerView recyclerView, int newState) {super.onScrollStateChanged(recyclerView, newState);}//进行滑动@Overridepublic void onScrolled(RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);//获取屏幕上显示的第一个条目和最后一个条目的下标int firstVisibleItemPosition = lm.findFirstVisibleItemPosition();int lastVisibleItemPosition = lm.findLastVisibleItemPosition();//获取播放条目的下标int currentPosition = adapter.currentPosition;if((firstVisibleItemPosition > currentPosition || lastVisibleItemPosition < currentPosition) && currentPosition > -1){//让播放隐藏的条目停止MediaHelper.release();adapter.currentPosition = -1;adapter.notifyDataSetChanged();}}};

代码：https://github.com/JackChan1999/VideoPlayer

总结

以上是生活随笔为你收集整理的TextureView+MediaPlayer实现在线短视频播放的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。