Generally, a player should support the following display modes:
- Equal scale, maximized area display, no cropping
- Equal scale, maximum area display, cropping
- Stretched display, covering the full screen
To implement these display modes, you only need to make some adjustments to the layout of the playback controls. How is EasyPlayer implemented?
EasyPlayer uses a PlayFragment for video playback. This class implements a setScaleType method to set the display mode. set (or switch).
public void setScaleType(@IntRange(from = ASPACT_RATIO_INSIDE, to = FILL_WINDOW) int type){
mRatioType = type;
if (mWidth != 0 && mHeight != 0){
onVideoSizeChange();
}
}The logic here is very simple. First, save the state of the type, and determine whether the width and height of the video have been obtained. If so, the size of the view will be calculated immediately, otherwise, it will be calculated after it is obtained.
Its parameters support the following:
/**
* 等比例,最大化区域显示,不裁剪
*/
public static final int ASPACT_RATIO_INSIDE = 1;
/**
* 等比例,裁剪,裁剪区域可以通过拖拽展示\隐藏
*/
public static final int ASPACT_RATIO_CROPE_MATRIX = 2;
/**
* 等比例,最大区域显示,裁剪
*/
public static final int ASPACT_RATIO_CENTER_CROPE = 3;
/**
* 拉伸显示,铺满全屏
*/
public static final int FILL_WINDOW = 4;Let's combine the code and comments to see what the onVideoSizeChange() function mainly does:
private void onVideoSizeChange() {
// 视频尺寸未获取成功,直接返回.
if (mWidth == 0 || mHeight == 0) return;
if (mAttacher != null){ // 如果之前的模式是ASPACT_RATIO_CROPE_MATRIX,先释放attacher.
mAttacher.cleanup();
mAttacher = null;
}
if (mRatioType == ASPACT_RATIO_CROPE_MATRIX) {
// ...
// 这种情况下,需要将显示区域铺满父窗口.并使用matrix和手势进行显示控制.
// 具体的控制方法,参考文章:http://blog.csdn.net/jyt0551/article/details/56063869
mSurfaceView.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
mSurfaceView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
// 初始化新的Attacher进行显示控制.
// ...
// 使用一个角度控件来显示当前的拖动角度.
mAngleView.setVisibility(View.VISIBLE);
}else {
// 重置matrix为默认(不做显示形变)
mSurfaceView.setTransform(new Matrix());
mAngleView.setVisibility(View.GONE);
// 分别计算出显示控件的宽高比和视频的宽高比
float ratioView = getView().getWidth() * 1.0f/getView().getHeight();
float ratio = mWidth * 1.0f/mHeight;
switch (mRatioType){
case ASPACT_RATIO_INSIDE: {
if (ratioView - ratio < 0){ // 屏幕宽高比相比视频的宽高比更小.表示视频是过于宽了.
// 那就以宽为基准.宽最大化
mSurfaceView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
// 高进行等比例缩放
mSurfaceView.getLayoutParams().height = (int) (getView().getWidth() / ratio + 0.5f);
}else{ // 视频是竖屏了.
// 以高为基准,高最大化
mSurfaceView.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
// 宽进行等比例缩放
mSurfaceView.getLayoutParams().width = (int) (getView().getHeight() * ratio + 0.5f);
}
}
break;
case ASPACT_RATIO_CENTER_CROPE: {
// 以更短的为基准
if (ratioView - ratio < 0){ // 屏幕宽高比相比视频的宽高比更小.表示视频是过于宽了.横向裁剪
// 以高为基准.高铺满全屏
mSurfaceView.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
// 等比例计算出横向区域..多出父控件的范围将被裁剪
mSurfaceView.getLayoutParams().width = (int) (getView().getHeight() * ratio+ 0.5f);
}else{ // 视频是竖屏了.
// 那就以宽为基准.宽铺满屏幕
mSurfaceView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
// 等比例计算出纵向区域,超出父控件的范围将被裁剪
mSurfaceView.getLayoutParams().height = (int) (getView().getWidth() / ratio+ 0.5f);
}
}
break;
case FILL_WINDOW:{
// 铺满父控件即可...
mSurfaceView.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
mSurfaceView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
}
break;
}
}
// 布局更改,刷新下.
mSurfaceView.requestLayout();
}The onVideoSizeChange function, in addition to being called when the display mode is manually set, is also called after the video width and height are successfully obtained, or the video width and height are changed. As follows:
if (resultCode == EasyRTSPClient.RESULT_VIDEO_DISPLAYED) {
// 视频开始显示了.
onVideoDisplayed();
} else if (resultCode == EasyRTSPClient.RESULT_VIDEO_SIZE) {
// 视频分辨率获取到,或者更改了
mWidth = resultData.getInt(EasyRTSPClient.EXTRA_VIDEO_WIDTH);
mHeight = resultData.getInt(EasyRTSPClient.EXTRA_VIDEO_HEIGHT);
onVideoSizeChange();
}In the demo example of the EasyPlayer project, the calling method is as follows:
public void onToggleAspectRatio(View view) {
PlayFragment f =mRenderFragment;
if (f == null) return;
f.setScaleType(++i);
switch (i){
case PlayFragment.ASPACT_RATIO_INSIDE: {
Toast.makeText(this,"等比例居中",Toast.LENGTH_SHORT).show();
}
break;
case PlayFragment.ASPACT_RATIO_CENTER_CROPE: {
Toast.makeText(this,"等比例居中裁剪视频",Toast.LENGTH_SHORT).show();
}
break;
case PlayFragment.FILL_WINDOW:{
Toast.makeText(this,"拉伸视频,铺满区域",Toast.LENGTH_SHORT).show();
}
break;
case PlayFragment.ASPACT_RATIO_CROPE_MATRIX:{
Toast.makeText(this,"等比例显示视频,可拖拽显示隐藏区域.",Toast.LENGTH_SHORT).show();
}
break;
}
if (i == PlayFragment.FILL_WINDOW){
i = 0;
}
}Let's see the display effect:
About EasyPlayer Streaming Media Player
An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player. EasyPlayer support RTSP(RTP over TCP/UDP) version & Pro version, cover all kinds of streaming media! EasyPlayer is a refined, efficient and stable streaming media player. It is divided into three versions: RTSP version, RTMP version and Pro version. It supports a variety of streaming media audio and video protocols and file playback. It is widely used in many fields such as education, recording and broadcasting, IPTV and so on!
EasyPlayer：https://github.com/EasyDSS/EasyPlayer
Click the link to join the group【EasyPlayer】: 544917793
Get more information
Email: [email protected]
EasyDarwin Open Source Streaming Server: www.EasyDarwin.org
EasyDSS Commercial Streaming Solutions: www.EasyDSS.com
EasyNVR no plug-in live broadcast solution: www.EasyNVR.com
Copyright © EasyDarwin Team 2012-2017
