天天看點

阿裡雲移動端播放器進階功能---UI播放器

基本介紹

使用者想要實作一個視訊播放除了要內建我們播放器SDK之外,還需要做一些UI互動的東西。要實作一個完整的視訊播放還是需要做很多工作的。那麼我們提供了一套完整的UI播放器,使用者可以非常快速的內建進去來實作完整的播放器功能。最重要的是目前UI播放器已經開源。

那麼,完整的UI播放器包括哪些功能呢?

阿裡雲移動端播放器進階功能---UI播放器

包括亮度控制、音量控制、清晰度切換、進度條、時間顯示、全屏、标題、倍數、快進快退等控制。基本上和目前市面上主流的視訊APP是類似的。

https://www.atatech.org/articles/131373#2 主要特色  

https://www.atatech.org/articles/131373#3 支援換膚

目前換膚提供幾種顔色的風格,可以選擇,具體如下:

/*
 功能:初始化界面皮膚
 備注:預設皮膚為藍色
 */
@property (nonatomic, assign) AliyunVodPlayerViewSkin viewSkin;

typedef NS_ENUM (int, AliyunVodPlayerViewSkin) {
    AliyunVodPlayerViewSkinBlue = 0,
    AliyunVodPlayerViewSkinRed,
    AliyunVodPlayerViewSkinOrange,
    AliyunVodPlayerViewSkinGreen
};
           

https://www.atatech.org/articles/131373#4 支援多語言

我們将語言單獨放到了一個bundle中,目前支援英文和中文,也可以添加其他的語言翻譯到bundle中。

阿裡雲移動端播放器進階功能---UI播放器

https://www.atatech.org/articles/131373#5 使用簡單

将UI播放器單獨封裝成了一個view,使用的時候隻需要将view添加到使用者的界面中即可。

/****************UI播放器內建**********************/
self.playerView = [[AliyunVodPlayerView alloc] initWithFrame:CGRectMake(0,topHeight, width, height) andSkin:AliyunVodPlayerViewSkinRed];
self.playerView.circlePlay = YES;

//加入到界面中
[self.view addSubview:self.playerView];

//設定播放源
[self.playerView playViewPrepareWithURL:self.config.videoUrl];
           

https://www.atatech.org/articles/131373#6 UI播放器實作  

下面以Android為例,來簡單介紹下UI播放器是如何實作的

https://www.atatech.org/articles/131373#7 view的層級關系

阿裡雲移動端播放器進階功能---UI播放器

https://www.atatech.org/articles/131373#8 TipsView

       提示view,繼承

RelativeLayout

, 實作

ITheme

接口。主要用于顯示提示資訊。比如:網絡變化的提示,錯誤的提示,播放結束的提示等。這些提示也是一個view,被添加到TipsView中。将會顯示在TipsView的CENTER位置。

https://www.atatech.org/articles/131373#9 GuideView

        使用者引導View。主要在橫屏的時候,首次使用的話,提示使用者的手勢操作。複寫了

onTouchEvent

事件,觸摸這個view的時候将會隐藏。

https://www.atatech.org/articles/131373#10 SpeedView

倍速播放切換View。主要用于切換倍速。SpeedView中有個子View ,叫mMainSpeedView。主體界面就是這個界面。

https://www.atatech.org/articles/131373#11 ControlView

播放器的控制欄。這個界面上包含了标題欄,操作欄,鎖屏按鈕等等。可以對播放器進行暫停,播放。seek等操作。

https://www.atatech.org/articles/131373#12 QualityView

顯示清晰度的清單view。

https://www.atatech.org/articles/131373#13 GestureView

手勢控制的view。通過

GestureDetector  +  OnGestureListener
           

實作。

https://www.atatech.org/articles/131373#14 CoverView

封面view。

https://www.atatech.org/articles/131373#15 SurfaceView

播放view。也可以替換為TextureView。  但是可能會引發:倍速播放的時候,畫面更新不及時的問題。因為SurfaceView有雙緩沖,而TextureView就是一個view。畫面重新整理性能有不同。

https://www.atatech.org/articles/131373#16 整體架構的模式

整體采用類MVC的結構。

https://www.atatech.org/articles/131373#17 M: 資料層。

     在VodPlayerView中,資料的資訊,都是由播放器提供的。通過調用播放器提供的API,比如getCurrentPosition擷取目前的播放位置。

https://www.atatech.org/articles/131373#18 V:界面層。

界面層,在上文中已經詳細的分析了。view的作用就是用來展示界面,**完全不涉及業務邏輯**。畫面的變化和更新,也是完全不是自己控制的。都是由P層,也就是控制層去控制的。
           

https://www.atatech.org/articles/131373#19 C:控制層。

控制層,其實是在VodPlayerView的類中實作的。在這裡,VodPlayerView其實就當做一個View的承載器和業務邏輯的控制器。<br />     View的承載功能,是為了能夠在XML和代碼中能夠使用這個view。業務邏輯的控制功能則是它更核心的功能。<br />     比如與播放的控制互動。上面的界面分析中:播放器的ControlView負責了界面上暫停,播放,seek等的操作。業務邏輯與view的分離是通過接口的回調實作的。
           

繼續閱讀