Android开发日记(二十一)—— 嵌入 ViewPager 的视频播放器

嵌入 ViewPager 的视频播放器

这次的目标是实现一个能够播放视频的轮播器,即每个页面都能放置视频且能随页面的切换实现视频的切换。这个需求类似于在ListView中实现小视频的播放和切换,核心内容是怎么将视频播放器与控件的状态变化连接在一起。

视频播放器

实现思路

  • 使用 ViewPager 进行轮播
  • 使用 MediaPlayer 对视频进行播放
  • 使用 TextureView 展示视频界面

具体实现

为了提高性能,当然不能为每一页配置一个 MediaPlayer 用来播放视频,那么最好的解决方法是当页面切换时切换 MediaPlayer 的播放源。利用 ViewPager.OnPageChangeListener 监听轮播器的页面切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (first && positionOffset == 0 && positionOffsetPixels == 0) {
onPageSelected(position);
first = false;
}
}

@Override
public void onPageSelected(int position) {
//从缓存的视图中找到当前视图并传递给扩展的MediaPlayer进行控制
View view = cacheView.get(position);
mMediaPlayer.playWithVideoLayout(view);
}

@Override
public void onPageScrollStateChanged(int state) {

}

在每一页的 view 中需要有 TextureView 用来显示视频界面,同时利用 TextureView.SurfaceTextureListener监听当前TextureView的可用性。SurfaceTextureListener接口用于让TextureView的使用者知道SurfaceTexture已准备好,这样就可以把SurfaceTexture交给相应的内容源。

TextureView可用于承载显示『数据流』的场合,之前看到『流』不太明确其意义,这里给两个具体的场景大家体会一下:camera模块从sensor采集了1080p@30fps的预览数据『流』,视频通话模块从网络包里解出实时视频数据『流』。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
public class VpVideoView extends TextureView implements TextureView.SurfaceTextureListener, MediaPlayer.OnVideoSizeChangedListener {

//some params

private Uri mSource;//视频源
private Surface surface;//用于承接播放器
private VPMediaPlayer mediaPlayer;//视频播放器

// some methods

public void setMediaPlayer(VPMediaPlayer mediaPlayer) {
this.mediaPlayer = mediaPlayer;
}

public void initSource(String videoPath) {
mSource = Uri.parse(videoPath);
}

public void setSeekProgress(int seekProgress) {
this.seekProgress = seekProgress;
}


@Override
protected void onDetachedFromWindow() {
// release resources on detach
super.onDetachedFromWindow();
}

/*
* TextureView.SurfaceTextureListener
*/

@Override
public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int width, int height) {
if (mSource == null) return;
surface = new Surface(surfaceTexture);
if (mediaPlayer != null) {
mediaPlayer.replayWithCurrentLayout();
}
}


@Override
public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
}

@Override
public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
if (mediaPlayer != null) {
mediaPlayer.pause();
}
return true;
}

@Override
public void onSurfaceTextureUpdated(SurfaceTexture surface) {
}


@Override
public void onVideoSizeChanged(MediaPlayer mp, int width, int height) {
mVideoHeight = mp.getVideoHeight();
mVideoWidth = mp.getVideoWidth();
updateViewViewSize();
updateTextureViewSizeCenter();
}

/**
* 让控件大小适配视频大小
*/

private void updateViewViewSize() {
float sx = (float) getMeasuredWidth() / (float) mVideoWidth;
int height = (int) (sx * mVideoHeight);
setMeasuredDimension(MeasureSpec.makeMeasureSpec(getMeasuredWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
postInvalidate();
}

//重新计算video的显示位置,让其全部显示并据中
private void updateTextureViewSizeCenter() {

float sx = (float) getMeasuredWidth() / (float) mVideoWidth;
float sy = (float) getMeasuredHeight() / (float) mVideoHeight;
Matrix matrix = new Matrix();
//第1步:把视频区移动到View区,使两者中心点重合.
matrix.preTranslate((getMeasuredWidth() - mVideoWidth) / 2, (getMeasuredHeight() - mVideoHeight) / 2);
//第2步:因为默认视频是fitXY的形式显示的,所以首先要缩放还原回来.
matrix.preScale(mVideoWidth / (float) getMeasuredWidth(), mVideoHeight / (float) getMeasuredHeight());
//第3步,等比例放大或缩小,直到视频区的一边和View一边相等.如果另一边和view的一边不相等,则留下空隙
if (sx >= sy) {
matrix.postScale(sy, sy, getMeasuredWidth() / 2, getMeasuredHeight() / 2);
} else {
matrix.postScale(sx, sx, getMeasuredWidth() / 2, getMeasuredHeight() / 2);
}
setTransform(matrix);
postInvalidate();
}
}

这个类主要有一下几个功能:(1)使用Texture来展示视频流;(2)记录视频源和播放进度(注意当view被销毁时进度也会重置,所有如果需要进度不随ViewPager的缓存机制影响要另做保存);(3)利用 MediaPlayer.OnVideoSizeChangedListener 调整视频长与宽;(4)利用 SurfaceTextureListener监听TextureView是否可用。当判断可用时开始启动MediaPlayer播放视频。

在另一方面,需要对MediaPlayer做一些处理,以便做视频的切换播放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
public class VPMediaPlayer extends MediaPlayer implements
MediaPlayer.OnCompletionListener,
MediaPlayer.OnErrorListener,
MediaPlayer.OnPreparedListener {


//some params

public VPMediaPlayer(SimpleViewPager simpleViewPager) {
this.simpleViewPager = simpleViewPager;

setLooping(false);
setOnPreparedListener(this);
setOnCompletionListener(this);
setOnErrorListener(this);

}

//some methods

@Override
public void start() throws IllegalStateException {
super.start();
seekTo(videoView.getSeekProgress());
}

public void playWithVideoLayout() {
isScrolling = false;
try {
reset();
setOnVideoSizeChangedListener(videoView);
setDataSource(videoView.getContext(), videoView.getmSource());
setSurface(videoView.getSurface());
prepareAsync();
} catch (NullPointerException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

public void replayWithCurrentLayout() {
simpleViewPager.stopAutoScroll();
isScrolling = false;
try {
reset();
setOnVideoSizeChangedListener(videoView);
setDataSource(videoView.getContext(), videoView.getmSource());
setSurface(videoView.getSurface());
prepareAsync();
} catch (NullPointerException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

public void pauseCurrentVideoLayout() {
simpleViewPager.startAutoScroll(true);
isScrolling = true;
}

@Override
public void pause() throws IllegalStateException {
super.pause();
if (videoView != null) {
videoView.setSeekProgress(getCurrentPosition());
}
}

@Override
public void onCompletion(MediaPlayer mp) {
simpleViewPager.startAutoScroll(true);
isScrolling = true;
}

@Override
public boolean onError(MediaPlayer mp, int what, int extra) {
simpleViewPager.startAutoScroll(true);
isScrolling = true;
reset();
return false;
}

@Override
public void onPrepared(MediaPlayer mp) {
start();
}

public boolean isScrolling() {
return isScrolling;
}
}

VPMediaPlayer 主要处理一些播放器的逻辑,主要功能包括:(1)提供视频的播放暂停功能;(2)能够在视频播放结束后自动切换到下一页。

结束语

整个部分暂时没有添加视频控制的功能和UI,但有了主要的核心代码其他的功能添加起来应该都是水到渠成的事。