一步步自定义视频播放器——SurfaceView的使用

Surface

Surface与SurfaceView这篇文章对Surface和SurfaceView做了很详细的解释。

简单的说Surface对应了一块屏幕缓冲区,每个window对应一个Surface,任何View都要画在Surface的Canvas上。传统的view共享一块屏幕缓冲区,所有的绘制必须在UI线程中进行。

Surface可以理解为: Surface类似一个句柄,可以得到Canvas、原始缓冲区以及其他方面的内容。
Canvas用于画图
原始缓冲区用于保存当前窗口的像素数据

SurfaceView

SurfaceView继承自View,但它有自己的Surface。

1
2
3
4
5
6
7
if (mWindow == null) {    
mWindow = new MyWindow(this);
mLayout.type = mWindowType;
mLayout.gravity = Gravity.LEFT|Gravity.TOP;
mSession.addWithoutInputChannel(mWindow, mWindow.mSeq, mLayout,
mVisible ? VISIBLE : GONE, mContentInsets);
}

源码表明,SurfaceView会自己创建一个MyWindow,一个window对应一个Surface,因此SurfaceView也就内嵌了一个自己的Surface。

传统View及其派生类的更新只能在UI线程,然而UI线程还同时处理其他交互逻辑,这就无法保证View更新的速度和帧率了,而SurfaceView可以用独立的线程进行绘制,因此可以提供更高的帧率,例如游戏,摄像头取景等场景就比较适合SurfaceView来实现。

SurfaceHolder

SurfaceHolder是一个接口,其作用就像一个关于Surface的监听器,提供访问和控制SurfaceView内嵌的Surface相关的方法。
它通过三个回调方法,让我们可以感知到Surface的创建、销毁或者改变。
在SurfaceView中有一个方法getHolder,可以很方便地获得SurfaceView内嵌的Surface所对应的监听器接口SurfaceHolder。
SurfaceHolder.Callback主要是当底层的Surface被创建、销毁或者改变时提供回调通知,由于绘制必须在Surface被创建后才能进行,因此SurfaceHolder.Callback中的surfaceCreated 和surfaceDestroyed 就成了绘图处理代码的边界。
SurfaceHolder.Callback中定义了三个接口方法:

  1. abstract void surfaceChanged(SurfaceHolder holder, int format, int width, int height):当surface发生任何结构性的变化时(格式或者大小),该方法就会被立即调用。
  2. abstract void surfaceCreated(SurfaceHolder holder):当surface对象创建后,该方法就会被立即调用。
  3. abstract void surfaceDestroyed(SurfaceHolder holder):当surface对象在将要销毁前,该方法会被立即调用。

小结

  • SurfaceView是一个拥有独立绘图层的特殊View
  • Surface是内存中的一段绘图缓冲区
  • SurfaceView中具有两个Surface, 即双缓冲机制
  • SurfaceHolder是Surface的持有者,SurfaceView就是通过过SurfaceHolder来对Surface进行管理控制的。并且SurfaceView.getHolder方法可以获取SurfaceView相应的SurfaceHolder。
  • Surface是在SurfaceView所在的Window可见的时候创建的。我们可以使用SurfaceHolder.addCallback方法来监听Surface的创建与销毁的事件。

从设计模式的高度来看,Surface、SurfaceView和SurfaceHolder实质上就是广为人知的MVC,即Model-View-Controller。
Model就是模型的意思,或者说是数据模型,或者更简单地说就是数据,也就是这里的Surface;
View即视图,代表用户交互界面,也就是这里的SurfaceView;
SurfaceHolder很明显可以理解为MVC中的Controller(控制器)。

SurfaceView与MediaPlayer结合

SurfaceView解析视频的流程:首先确定视频的格式,知道编码格式后,通过编码格式进行解码,得到一帧一帧的图像,并把这些图像快速的显示在界面上。
简单地说,SurfaceView用来显示MediaPlayer中解析得到的视频图像。
MediaPlayer通过setDisplay(SurfaceHolder sh)来指定SurfaceView显示图像。

SurfaceView双缓冲

SurfaceView和大部分视频应用一样,把视频解析成的一帧帧图像进行显示。如果把这个解析放在一个线程中完成,可能在上一帧显示后,下一帧来不及解析,导致画面不流畅或者视频不同步。通过双缓冲机制来显示图像能够有效解决上述问题。
双缓冲机制可以理解为两个线程轮番解析视频流的帧图像,当一个线程解析完帧图像后,把图像渲染到界面中,同时另外一个线程开始解析下一帧图像,使得两个线程轮番配合区解析视频流,达到流畅播放的效果。

注意

 SurfaceView内部实现了双缓冲的机制,但是实现这个功能是非常消耗系统内存的。因为移动设备的局限性,Android在设计的时候规定,SurfaceView如果为用户可见的时候,创建SurfaceView的SurfaceHolder,如果发现SurfaceView变为用户不可见的时候,则立即销毁SurfaceView的SurfaceHolder,以达到节约系统资源的目的。

如果开发人员不对SurfaceHolder进行维护,会出现最小化程序后,再打开应用的时候,视频的声音在继续播放,但是不显示画面了的情况,这就是因为当SurfaceView不被用户可见的时候,之前的SurfaceHolder已经被销毁了,再次进入的时候,界面上的SurfaceHolder已经是新的SurfaceHolder了。所以SurfaceHolder需要我们开发人员去编码维护,维护SurfaceHolder需要用到上述的三个回调方法。

小例子

使用的时候注意要配置权限

1
<uses-permission android:name="android.permission.INTERNET" />

使用步骤为:
1.创建 MediaPlayer,并让他加载指定的视频文件
2.在布局中定义SurfaceView组件,或者在程序中创建SurfaceView组件
3.为SurfaceView的SurfaceHolder添加Callback监听器
4.调用MediaPlayer对象的setDisplay(SurfaceHolder sh)将所播放的视频图像输出到指定的SurfaceView组件中
5.调用MediaPlayer对象的start(),stop(),和pause()方法。

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
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化
mediaPlayer = new MediaPlayer();
surfaceView = findViewById(R.id.surface_view);
//设置屏幕常亮
surfaceView.getHolder().setKeepScreenOn(true);
//添加回调接口
surfaceView.getHolder().addCallback(callback);
}

public void play() {
try {
mediaPlayer.reset();//重置
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
mediaPlayer.setDataSource(URL);//设置播放路径
mediaPlayer.setDisplay(surfaceView.getHolder());//视频输出到SurfaceView上
mediaPlayer.prepare();//使用同步方式
mediaPlayer.start();//开始播放

} catch (IOException e) {
e.printStackTrace();
Toast.makeText(MainActivity.this, "路径错误", Toast.LENGTH_SHORT).show();
}
}

完整代码

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
package com.example.com.myapplication;

import android.media.AudioManager;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Toast;

import java.io.IOException;

public class MainActivity extends AppCompatActivity {
private SurfaceView surfaceView;
private MediaPlayer mediaPlayer;
private String URL = "http://fairee.vicp.net:83/2016rm/0116/baishi160116.mp4";
private int position;//记录位置

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化
mediaPlayer = new MediaPlayer();
surfaceView = findViewById(R.id.surface_view);
//设置屏幕常亮
surfaceView.getHolder().setKeepScreenOn(true);
//添加回调接口
surfaceView.getHolder().addCallback(callback);
}


private SurfaceHolder.Callback callback = new SurfaceHolder.Callback() {
@Override
public void surfaceCreated(SurfaceHolder holder) {

}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
if (mediaPlayer != null && mediaPlayer.isPlaying()) {
position = mediaPlayer.getCurrentPosition();
mediaPlayer.stop();
}

}
};

public void play() {
try {
mediaPlayer.reset();//重置
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
//raw文件夹下面的内容
// Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.baishi);
// mediaPlayer.setDataSource(this, uri);
mediaPlayer.setDisplay(surfaceView.getHolder());
mediaPlayer.setDataSource(URL);
//视频输出到SurfaceView上

mediaPlayer.prepare();//使用同步方式
mediaPlayer.start();//开始播放

} catch (IOException e) {
e.printStackTrace();
Toast.makeText(MainActivity.this, "路径错误", Toast.LENGTH_SHORT).show();
}
}

public void start(View view) {
play();
}

public void pause(View view) {
if (mediaPlayer.isPlaying()) {
mediaPlayer.pause();
position = mediaPlayer.getCurrentPosition();
}
}

public void goOn(View view) {
mediaPlayer.seekTo(position);
mediaPlayer.start();
}

public void stop(View view) {
if (mediaPlayer.isPlaying()) {
mediaPlayer.stop();
}
}

@Override
protected void onPause() {
super.onPause();
if (mediaPlayer.isPlaying()) {
mediaPlayer.pause();
position = mediaPlayer.getCurrentPosition();

}
}

@Override
protected void onDestroy() {
super.onDestroy();
//释放资源
if (mediaPlayer != null && mediaPlayer.isPlaying()) {
mediaPlayer.stop();
mediaPlayer.release();
}
}
}

布局

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.example.com.myapplication.MainActivity">

<SurfaceView
android:id="@+id/surface_view"
android:layout_width="match_parent"
android:layout_height="400dp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="start"
android:text="播放" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="pause"
android:text="暂停" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="goOn"
android:text="继续" />


<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="stop"
android:text="停止" />
</LinearLayout>
</LinearLayout>

实现效果:

SurfaceView的使用
SurfaceView与Surface
SurfaceView播放视频

0%