云课堂场景 播放器

• 1 Feature Overview
• 2 Initialization and Playback
• 3 Player Skin
  • 3.1 Skin Controlling the Player
  • 3.2 Skin Delegate Callbacks
  • 3.3 Portrait SkinPLVLCMediaPlayerSkinView
  • 3.4 Landscape SkinPLVLCLiveRoomPlayerSkinView
• 4 Player More Options
• 5 Player Canvas

1 Feature Overview

Video playback is a fundamental feature provided in multi-scenario projects, including live streaming player and replay player. In the cloud classroom scenario module, the main player functionality code is located in PLVLCMediaAreaView, and PLVLCMediaAreaView integrates the functionality implemented by PLVPlayerPresenter from 7_3 Core common-player.

2 Initialization and Playback

The code is as follows:

/// 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 Player Skin

In the cloud classroom scenario, some player functions are controlled through delegate callbacks of the skin UI. The skin is divided into portrait skin PLVLCMediaPlayerSkinView and landscape skin PLVLCLiveRoomPlayerSkinView. Both skins are extended from PLVLCBasePlayerSkinView. The UI elements of the portrait and landscape skins are the same, differing only in UI layout.

3.1 Skin Controlling the Player

• Live: Refresh button, live duration, fullscreen button
• Replay: Player playback time, total time, progress bar, fullscreen button

3.2 Skin Delegate Callbacks

All delegates of the landscape skin are defined in several types of PLVLCBasePlayerSkinView . They are specifically called back externally, and different functional businesses invoke callbacks in different places.

• Click Back

  Implementation handling functions:

  • Change the room to portrait mode when in fullscreen;
  • Exit the room when in portrait mode;

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

• Click More

  Implementation handling functions: Open the more view. For more features, refer to 4 Player More Options

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

• Click Play, Pause

  Implementation handling functions: Play, pause the player

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

• Click Refresh

  Implementation handling functions: Reload the live video content

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

• Drag the Progress Bar

  Implementation handling functions: Change the playback progress of the replay player

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

3.3 Portrait SkinPLVLCMediaPlayerSkinView

The PLVLCMediaPlayerSkinView object interacts with PLVPlayerPresenter in PLVLCMediaAreaView.m, and interacts with PLVLCCloudClassViewController through the delegate of PLVLCMediaAreaView to synchronize the UI state of the landscape skin.

3.4 Landscape SkinPLVLCLiveRoomPlayerSkinView

The PLVLCLiveRoomPlayerSkinView object interacts with PLVLCMediaAreaView in PLVLCCloudClassViewController.m to control PLVPlayerPresenter and synchronize the portrait skin.

PLVLCBasePlayerSkinView, PLVLCMediaPlayerSkinView, PLVLCLiveRoomPlayerSkinView can be found in the polyv demo project.

4 Player More Options

In the cloud classroom scenario, switching between video or audio, video quality (bitrate), and stream lines for the player is implemented in PLVLCMediaAreaView.m through PLVPlayerPresenter and the UI wrapper class PLVLCMediaMoreView to switch player quality and stream lines.

• Initialize the more view, synchronize player status

/// -(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];
}

• Implement more delegate callbacks to control the player

#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 can be found in the polyv demo project.

5 Player Canvas

The player canvas in the cloud classroom scenario displays corresponding UI based on the room status (no live stream, waiting for live stream, live streaming, live stream disconnected, live stream ended) and player mode (video, audio), and controls the player through delegate callbacks. This functionality's UI is encapsulated in PLVLCMediaPlayerCanvasView, and is instantiated and called in PLVLCMediaAreaView.m.

Implement the PLVLCMediaPlayerCanvasViewDelegate delegate

In audio mode, clicking the playback screen triggers this method. The callback is handled in PLVLCMediaPlayerCanvasView, switching the player to video mode.

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

PLVLCMediaPlayerCanvasView can be found in the polyv demo project.