阿里雲移動端播放器高級功能---畫面控制

基本介紹

常常遇到一些開發者問:
1.咱們播放的時候,會有黑邊怎麼處理?尤爲是在相似於抖音,直播這樣的場景下,若是視頻有黑邊,很影響畫面的視覺效果。而阿里雲播放器提供了縮放功能,用來去除黑邊,達到視頻全屏的效果。
2.直播時攝像頭採集常常會遇到反向的問題,就是採集出來的視頻畫面中的字是反的,對於這種狀況怎麼處理呢?阿里雲播放器提供了鏡像的功能,能夠水平和垂直鏡像,讓畫面變成你想要的樣子。
3.對一些橫屏拍攝的視頻同時咱們提供了旋轉功能,能夠選擇90、270度,旋轉以後就能夠實現全屏渲染了。ide

渲染模式設置

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 是以犧牲畫面的完整性爲代價,從而實現了沒有黑邊。因此,當畫面的寬高比與實際的寬高比相差太大時,不太合適使用此配置。atom

咱們來看具體的顯示效果,好比播放一個豎屏的視頻。spa

1.設置VIDEO_SCALING_MODE_SCALE_TO_FIT。即按照視頻的寬高比,放到SurfaceView(TextureView)中。3d

if (aliyunVodPlayer != null) {          
  aliyunVodPlayer.setVideoScalingMode(IAliyunVodPlayer.VideoScalingMode.VIDEO_SCALING_MODE_SCALE_TO_FIT);
}

acc7b1b15a4188eca1796923932164a226265aa5

能夠看到,有明顯的黑邊,可是畫面會被完整的顯示出來。code

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);
}

e7b4e1bdd2767937afcfeb05b0e55e36d2459adf

能夠看到,黑邊沒有了,可是畫面的部份內容已經看不到了。blog

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;

水平鏡像
0403fb38bf00b05c223e9bcaf3aac051c34d0f19
垂直鏡像
cd4cf12deb9b0224254fe506ea239f0cb55b3f98

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;

384a6c3ed46b44b460bafc8d3b5d54b4cd833928

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);
    }

做者: 雋阜
原文連接 本文爲雲棲社區原創內容,未經容許不得轉載。

相關文章
相關標籤/搜索