基本介紹
使用者想要實作一個視訊播放除了要內建我們播放器SDK之外,還需要做一些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中。
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的層級關系
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的分離是通過接口的回調實作的。