3_2-云课堂场景-播放器

• 1 功能概述
• 2 初始化及播放
• 3 播放器皮膚
  • 3.1 皮膚控制播放器
  • 3.2 皮膚代理回調
  • 3.3 豎屏皮膚PLVLCMediaPlayerSkinView
  • 3.4 橫屏皮膚PLVLCLiveRoomPlayerSkinView
• 4 播放器更多
• 5 播放器畫布

1 功能概述

影片播放是多場景專案中提供的基礎功能，功能包括直播播放器和回放播放器，在雲課堂場景模組中播放器主要功能程式碼在PLVLCMediaAreaView中，PLVLCMediaAreaView整合7_3 核心common-播放器中PLVPlayerPresenter來實現的功能。

2 初始化及播放

程式碼如下：

/// PLVLCMediaAreaView.m

- (void)setupModule{
    if (self.videoType == PLVChannelVideoType_Live) {
        /// 初始化直播 模块
        self.playerPresenter = [[PLVPlayerPresenter alloc] initWithVideoType:PLVChannelVideoType_Live];
        self.playerPresenter.delegate = self;
        [self.playerPresenter setupPlayerWithDisplayView:self.canvasView.playerSuperview];
        
    }else if (self.videoType == PLVChannelVideoType_Playback){
        /// 初始化直播回放 模块
        self.playerPresenter = [[PLVPlayerPresenter alloc] initWithVideoType:PLVChannelVideoType_Playback];
        self.playerPresenter.delegate = self;
        [self.playerPresenter setupPlayerWithDisplayView:self.canvasView.playerSuperview];
    }
}

3 播放器皮膚

雲課堂場景播放器部分功能是透過皮膚UI的代理回調來控制的，皮膚分為豎屏皮膚PLVLCMediaPlayerSkinView和橫屏皮膚PLVLCLiveRoomPlayerSkinView，兩種皮膚都基於PLVLCBasePlayerSkinView擴展而來，橫豎屏皮膚UI元素是一樣的區別在於UI佈局不同。

3.1 皮膚控制播放器

• 直播：重新整理按鈕、直播時長、全螢幕按鈕
• 回放：播放器播放時間、總時間、進度條、全螢幕按鈕

3.2 皮膚代理回調

橫屏皮膚的代理全部定義在幾類PLVLCBasePlayerSkinView 中，具體回調到外部，功能業務不同在不同地方呼叫回調

• 點選返回

  實現處理功能：

  • 全螢幕時將房間改變成豎屏；
  • 豎屏時退出房間；

/// @param currentFullScreen YES：全屏、NO：竖屏
/// - (void)plvLCBasePlayerSkinViewBackButtonClicked:(PLVLCBasePlayerSkinView *)skinView currentFullScreen:(BOOL)currentFullScreen;

• 點選更多

  實現處理功能：開啟更多檢視，更多功能參考4 播放器更多

/// - (void)plvLCBasePlayerSkinViewMoreButtonClicked:(PLVLCBasePlayerSkinView *)skinView;

• 點選播放、暫停

  實現處理功能：播放、暫停播放器

/// @param wannaPlay YES：播放、NO：暂停
/// - (void)plvLCBasePlayerSkinViewPlayButtonClicked:(PLVLCBasePlayerSkinView *)skinView wannaPlay:(BOOL)wannaPlay;

• 點選重新整理

  實現處理功能：重新載入直播影片內容

/// -(void)plvLCBasePlayerSkinViewRefreshButtonClicked:(PLVLCBasePlayerSkinView *)skinView;

• 拖動進度條

  實現處理功能：改變回放播放器播放進度

/// @param currentSliderProgress 进度（0 - 1浮点值 ）
/// - (void)plvLCBasePlayerSkinView:(PLVLCBasePlayerSkinView *)skinView sliderDragEnd:(CGFloat)currentSliderProgress;

3.3 豎屏皮膚PLVLCMediaPlayerSkinView

PLVLCMediaPlayerSkinView物件在PLVLCMediaAreaView.m中與PLVPlayerPresenter互動，，透過PLVLCMediaAreaView的代理與PLVLCCloudClassViewController互動，同步橫屏皮膚UI狀態。

3.4 橫屏皮膚PLVLCLiveRoomPlayerSkinView

PLVLCLiveRoomPlayerSkinView 物件在PLVLCCloudClassViewController.m中與PLVLCMediaAreaView互動，達到控制PLVPlayerPresenter和同步豎屏皮膚目的。

PLVLCBasePlayerSkinView、PLVLCMediaPlayerSkinView、PLVLCLiveRoomPlayerSkinView可以在polyv demo專案中找到。

4 播放器更多

雲課堂場景播放器切換影片或音訊、影片品質（碼率）和線路功能是在PLVLCMediaAreaView.m中透過PLVPlayerPresenter和UI封裝類別PLVLCMediaMoreView實現切換播放器品質線路功能。

• 初始化更多檢視，同步播放器狀態

/// -(void)updateMoreviewWithData {
    // 视频质量选项数据
    PLVLCMediaMoreModel * qualityModel = [PLVLCMediaMoreModel modelWithOptionTitle:PLVLCMediaAreaView_Data_QualityOptionTitle optionItemsArray:self.playerPresenter.codeRateNamesOptions];
    [qualityModel setSelectedIndexWithOptionItemString:self.playerPresenter.currentCodeRate];
    
    // 线路选项数据
    NSMutableArray * routeArray = [[NSMutableArray alloc] init];
    for (int i = 1; i <= self.playerPresenter.lineNum; i++) {
        NSString * route = [NSString stringWithFormat:@"线路%d",i];
        [routeArray addObject:route];
    }
    PLVLCMediaMoreModel * routeModel = [PLVLCMediaMoreModel modelWithOptionTitle:PLVLCMediaAreaView_Data_RouteOptionTitle optionItemsArray:routeArray selectedIndex:self.playerPresenter.currentLineIndex];
    
    // 整合数据
    NSMutableArray * modelArray = [[NSMutableArray alloc] init];
    if (qualityModel) { [modelArray addObject:qualityModel]; }
    if (routeModel) { [modelArray addObject:routeModel]; }

    // 更新 moreView
    [self.moreView updateTableViewWithDataArrayByMatchModel:modelArray];
}

• 實現更多代理回調，控制播放器

#pragma mark PLVLCMediaMoreViewDelegate
/// -(void)plvLCMediaMoreView:(PLVLCMediaMoreView *)moreView optionItemSelected:(PLVLCMediaMoreModel *)model{
    if ([model.optionTitle isEqualToString:PLVLCMediaAreaView_Data_ModeOptionTitle]) {
        // 用户点选了”模式“中的选项
        self.logoView.hidden = model.selectedIndex != 0;
        [self.canvasView switchTypeTo:(model.selectedIndex == 0 ? PLVLCMediaPlayerCanvasViewType_Video : PLVLCMediaPlayerCanvasViewType_Audio)];
        [self.playerPresenter switchLiveToAudioMode:(model.selectedIndex == 0 ? NO : YES)];
    } else if ([model.optionTitle isEqualToString:PLVLCMediaAreaView_Data_QualityOptionTitle]) {
        // 用户点选了”视频质量“中的选项
        [self.playerPresenter switchLiveToCodeRate:model.currentSelectedItemString];
    } else if ([model.optionTitle isEqualToString:PLVLCMediaAreaView_Data_RouteOptionTitle]) {
        // 用户点选了”线路“中的选项
        [self.playerPresenter switchLiveToLineIndex:model.selectedIndex];
    } else if ([model.optionTitle isEqualToString:PLVLCMediaAreaView_Data_SpeedOptionTitle]) {
        // 用户点选了”倍速“中的选项
        CGFloat speed = [[model.currentSelectedItemString substringToIndex:model.currentSelectedItemString.length - 1] floatValue];
        [self.playerPresenter switchLivePlaybackSpeedRate:speed];
    }
}

PLVLCMediaMoreView可以在polyv demo專案中找到。

5 播放器畫布

雲課堂場景播放器畫布是根據房間狀態(暫無直播、等待直播、直播中、直播斷開、直播結束)和播放器模式（影片、音訊），顯示相對應UI和透過代理回調控制播放器，此功能UI封裝在PLVLCMediaPlayerCanvasView中，在PLVLCMediaAreaView.m中實例化和呼叫。

實現PLVLCMediaPlayerCanvasViewDelegate代理

在音訊模式下，點選播放畫面回調此方法，在PLVLCMediaPlayerCanvasView中處理回調，播放器切換為影片模式

- (void)plvLCMediaPlayerCanvasViewPlayCanvasButtonClicked:(PLVLCMediaPlayerCanvasView *)playerCanvasView;

PLVLCMediaPlayerCanvasView可以在polyv demo專案中找到。