阿里雲移動端播放器高階功能---畫面控制
基本介紹
經常遇到一些開發者問：
1.我們播放的時候，會有黑邊怎麼處理？尤其是在類似於抖音，直播這樣的場景下，如果視訊有黑邊，很影響畫面的視覺效果。而阿里雲播放器提供了縮放功能，用來去除黑邊，達到視訊全屏的效果。
2.直播時攝像頭採集經常會遇到反向的問題，就是採集出來的視訊畫面中的字是反的，對於這種情況怎麼處理呢？阿里雲播放器提供了映象的功能，可以水平和垂直映象，讓畫面變成你想要的樣子。
3.對一些橫屏拍攝的視訊同時我們提供了旋轉功能，可以選擇90、270度，旋轉之後就可以實現全屏渲染了。
渲染模式設定
Android介面
播放器提供了 setVideoScalingMode 方法提供去改變畫面的大小。它可以設定兩種方式：
1. VIDEO_SCALING_MODE_SCALE_TO_FIT
按照視訊的寬高比，放到SurfaceView（TextureView）中。不會剪裁視訊畫面，畫面的內容是完整的。比如我的SurfaceView是1920:1080的，然後播放一個1280x720的視訊，如果使用FIT模式，最終顯示的話，播放器把1280x720這個視訊按照原始比例放大，直到寬或者高跟SurfaceView的寬或者高一直，最終只有上下有黑邊或者左右有黑邊。
2. VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
按照視訊的寬高比，將畫面鋪滿SurfaceView（TextureView）中。此時會剪裁視訊的畫面，可能兩邊有部分內容不會被顯示。crop方式肯定是沒有黑邊的。
播放器預設的縮放效果為：VIDEO_SCALING_MODE_SCALE_TO_FIT。
VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING 是以犧牲畫面的完整性為代價，從而實現了沒有黑邊。所以，當畫面的寬高比與實際的寬高比相差太大時，不太合適使用此配置。
我們來看具體的顯示效果，比如播放一個豎屏的視訊。
1.設定VIDEO_SCALING_MODE_SCALE_TO_FIT。即按照視訊的寬高比，放到SurfaceView（TextureView）中。
if (aliyunVodPlayer != null) {
aliyunVodPlayer.setVideoScalingMode(IAliyunVodPlayer.VideoScalingMode.VIDEO_SCALING_MODE_SCALE_TO_FIT);
}
可以看到，有明顯的黑邊，但是畫面會被完整的顯示出來。
2.設定VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING。即：按照視訊的寬高比，將畫面鋪滿SurfaceView（TextureView）中。
if (aliyunVodPlayer != null) {
aliyunVodPlayer.setVideoScalingMode(IAliyunVodPlayer.VideoScalingMode.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING);
}
可以看到，黑邊沒有了，但是畫面的部分內容已經看不到了。
iOS介面
iOS提供了一個屬性來獲取和設定渲染模式
@property(nonatomic, readwrite)ScalingMode scalingMode;
enum {
scalingModeAspectFit = 0,
scalingModeAspectFitWithCropping = 1,
};
typedef NSInteger ScalingMode;
和Android類似，scalingModeAspectFit對應Android的VIDEO_SCALING_MODE_SCALE_TO_FIT，scalingModeAspectFitWithCropping對應Android的VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING，具體介面說明和效果和Android一樣，在這裡不在贅述。
映象設定
iOS介面
iOS提供瞭如下介面來實現映象的設定，支援水平和垂直映象。
-(void) setRenderMirrorMode:(RenderMirrorMode)mirrorMode;
enum {
renderMirrorModeNone = 0,
renderMirrorHorizonMode,
renderMirrorVerticalMode,
};
typedef NSInteger RenderMirrorMode;
水平映象
垂直映象
Android介面
public void setRenderMirrorMode(VideoMirrorMode mirrorMode);
enum VideoMirrorMode {
VIDEO_MIRROR_MODE_NONE(0),
VIDEO_MIRROR_MODE_HORIZONTAL(1),
VIDEO_MIRROR_MODE_VERTICAL(2);
}
旋轉設定
iOS介面
iOS提供瞭如下介面來實現旋轉的設定，旋轉支援0、90、180、270度的旋轉。
-(void) setRenderRotate:(RenderRotate)rotate;
enum {
renderRotate0 = 0,
renderRotate90 = 90,
renderRotate180 = 180,
renderRotate270 = 270,
};
typedef NSInteger RenderRotate;
Android介面
public void setRenderRotate(VideoRotate rotate);
public static class VideoRotate {
public static VideoRotate ROTATE_0 = new VideoRotate(0);
public static VideoRotate ROTATE_90 = new VideoRotate(90);
public static VideoRotate ROTATE_180 = new VideoRotate(180);
public static VideoRotate ROTATE_270 = new VideoRotate(270);
}
本文作者：雋阜
本文為雲棲社群原創內容，未經允許不得轉載。