tencent cloud

Feedback

Last updated: 2024-06-17 17:06:27

    Component Introduction

    TUIPlayerShortVideo component is a short video component launched by Tencent Cloud with excellent performance, supporting ultra-fast first frame and smooth sliding of videos, and providing high-quality playback experience.
    First frame opens in seconds: First frame time is one of the core indicators of short video applications, which directly affects the user's viewing experience. Short video components use technologies such as pre-playback, pre-download, player reuse and precise traffic control to achieve a high-quality playback experience with extremely fast first frame and smooth sliding, thereby increasing user playback volume and retention time.
    Excellent performance: Through the optimization of player reuse and loading strategies, memory and CPU consumption are always kept at a low level while ensuring excellent smoothness.
    Quick integration: The component encapsulates complex playback operations, provides a default playback UI, and supports both FileId and URL playback, which can be quickly integrated into your project at low cost.

    Effect comparison

    From the example video below you can see the difference before and after implementing the best short video strategy.
    There is an obvious first frame lag before optimization.
    After optimization, the playback is smooth and the average playback time after optimization reaches 10 milliseconds - 30 milliseconds.
    Not optimized for short videos
    Optimized short video
    
    

    TUIPlayerKit Download

    TUIPlayerKit SDK and Demo can be downloaded by clicking here.

    Integration Guide

    1. Dependencies

    The SDKs that TUIPlayerShortVideo depends on are:
    TUIPlayerCore
    TXLiteAVSDK ≥ 11.4
    SDWebImage
    Masonry

    2. Environmental requirements

    System version:≥ iOS 9.0
    Development Environment:≥ Xcode 14.0 ( It is recommended to use the latest version)

    3. Integrated TUIPlayerCore

    Unzip the downloaded TUIPlayerKit resource package, add the TUIPlayerCore.xcframework component SDK to the appropriate location of the Xcode Project in your project, select the appropriate target, and check Do Not Embed.

    4. Integrated TUIPlayerShortVideo

    Unzip the downloaded TUIPlayerKit resource package, add the TUIPlayerShortVideo.xcframework component SDK to the appropriate location of your Xcode Project, select the appropriate target, and check Do Not Embed.

    5. Integrated TXLiteAVSDK

    For TXLiteAVSDK integration methods, please refer to TXLiteAVSDK Integration Guide.

    6. Integrated SDWebImage

    For downloading and integrating SDWebImage, please refer to the GitHub instructions.

    7. Integrated Masonry

    For downloading and integrating Masonry, please refer to the GitHub instructions.

    8. Pod Integration

    If your project supports pod, you can also integrate it through the spec file we provide, as follows:
    
    pod 'TUIPlayerShortVideo' ,:path => '../../../SDK/TUIPlayerShortVideoSDK/'
    pod 'TUIPlayerCore' ,:path => '../../../SDK/TUIPlayerCoreSDK/'
    Attention:
    Please configure Path according to your own project file path.
    Remote Pod integration is not currently supported.

    Interface Instructions

    1. Quick access

    1.1. Configure Player Premium License

    The use of TUIPlayer Kit components requires the use of the Mobile Player Premium License, which you can obtain by referring to the Mobile Player License Guide. If you have already obtained the corresponding license, you can go to Tencent Cloud Visual Cube Console > License Management > Mobile License to obtain the corresponding LicenseURL and LicenseKey. If you do not apply for the Mobile Player Premium License, video playback failures, black screens, etc. will occur.
    Before calling related functions, configure Licence in your project. It is recommended to reference the TUIPlayerCore module in - [AppDelegate application:didFinishLaunchingWithOptions:] make the following configuration:
    NSString * const licenceURL = @"<Obtained licenseUrl>";
    NSString * const licenceKey = @"<The key obtained>";
    [TXLiveBase setLicenceURL:licenceUrl key:licenceKey];
    [[TXLiveBase sharedInstance] setDelegate:self];

    1.2. Play

    Initialize TUIShortVideoView, as follows:
    
    - (TUIShortVideoView *)videoView {
    
    if (!_videoView) {
    ///Setting up a custom UI
    TUIPlayerShortVideoUIManager *uiManager = [[TUIPlayerShortVideoUIManager alloc] init];
    [uiManager setControlViewClass: TUIPlayerShortVideoControlView.class];
    [uiManager setControlViewClass: TUIPSControlLiveView.class viewType:TUI_ITEM_VIEW_TYPE_LIVE];
    [uiManager setControlViewClass: TUIPSControlCustomView.class viewType:TUI_ITEM_VIEW_TYPE_CUSTOM];
    [uiManager setLoadingView:[[TUIPSDLoadingView alloc] init]];
    
    _videoView = [[TUIShortVideoView alloc] initWithUIManager:uiManager];
    _videoView.delegate = self;
    _videoView.customCallbackDelegate = self;
    //_videoView.isAutoPlay = NO;
    // Set your playback strategy
    TUIPlayerVodStrategyModel *model = [[TUIPlayerVodStrategyModel alloc] init];
    model.mPreloadConcurrentCount = 1;
    model.preDownloadSize = 1;
    model.enableAutoBitrate = NO;
    // live strategy
    TUIPlayerLiveStrateyModel *liveStrateyModel = [[TUIPlayerLiveStrateyModel alloc] init];
    [_videoView setShortVideoLiveStrategyModel:liveStrateyModel];
    }
    return _videoView;
    }
    
    Add an instance of TUIShortVideoView to the View you want to present, as shown in the following code:
    videoView.frame = self.view.bounds;
    [self.view addSubview:self.videoView];
    Then add your videos array:
    
    TUIPlayerVideoModel *model1 = [[TUIPlayerVideoModel alloc] init]; ///Video Data
    TUIPlayerLiveModel *model2 = [[TUIPlayerLiveModel alloc] init]; ///Live data
    TUIPlayerDataModel *model3 = [[TUIPlayerDataModel alloc] init]; ///Custom Data
    /// Here, you can decide the amount of data per page based on your business situation.
    NSArray *videos1 = @[model1,model2,model3]
    [self.videoView setShortVideoModels:videos1];
    After the first set of videos is played, you need to continue to insert your second set of video data in the TUIShortVideoViewDelegate delegate method:
    TUIPlayerVideoModel *model1 = [[TUIPlayerVideoModel alloc] init]; ///Video Data
    TUIPlayerLiveModel *model2 = [[TUIPlayerLiveModel alloc] init]; ///Live data
    TUIPlayerDataModel *model3 = [[TUIPlayerDataModel alloc] init]; ///Custom Data
    /// Here, you can decide the amount of data per page based on your business situation.
    NSArray *videos2 = @[model1,model2,model3];
    -(void)onReachLast {
    ///Here you can make a data index record and continue to insert your 3rd 4th 5th 6th...group of data
    [self.videoView appendShortVideoModels:videos2];
    }

    1.3. TUIShortVideoView

    The main interfaces of TUIShortVideoView are as follows:
    Parameter name
    Implication
    isAutoPlay
    Whether to automatically play the first video when loading for the first time, default is YES
    videos
    Read-only property, get the data currently in the video list
    currentVideoModel
    The video model currently playing
    currentVideoIndex
    Index of the video currently playing
    currentPlayerStatus
    The current player's playback status
    isPlaying
    Is the current player playing
    delegate
    delegate
    refreshControl
    Set the pull-down refresh control
    initWithUIManager
    Initialization
    setShortVideoStrategyModel
    Set the live broadcast strategy
    setShortVideoLiveStrategyModel
    Set the live broadcast strategy
    setShortVideoModels
    Setting up a data source for the first time
    appendShortVideoModels
    Add video data source
    removeAllVideoModels
    Delete all video data
    setPlaymode
    Video playback mode, single loop or list loop, the former is the default
    pause
    Pause
    resume
    Resume
    destoryPlayer
    Destroy the player
    didScrollToCellWithIndex
    Jump to the video with the specified index
    startLoading
    Display loading image
    stopLoading
    Hide loading icon
    currentPlayerSupportedBitrates
    The bitrate supported by the currently playing video
    bitrateIndex
    Get the bitrate index of the current playback
    switchResolution:index:
    Switch resolution
    pausePreload
    Pause preloading
    resumePreload
    Resume preload
    getDataManager
    Get Data Manager
    getVodStrategyManager
    Get the On-Demand Policy Manager
    getLiveStrategyManager
    Get the Live Strategy Manager

    2. Global Configuration

    You can set some global configurations in TUIPlayerCore via the TUIPlayerConfig model.
    The main parameters of TUIPlayerConfig are shown in the table below:
    Parameter name
    Implication
    enableLog
    Whether to allow printing logs, the default is NO
    Then configure globally through TUIPlayerCore:
    TUIPlayerConfig *config = [TUIPlayerConfig new];
    config.enableLog = YES;
    [[TUIPlayerCore shareInstance] setPlayerConfig:config];

    3. Player policy configuration

    3.1. VOD Playback Policy Settings

    You can use the TUIPlayerVodStrategyModel model to configure the on-demand playback strategy.
    The main parameters of TUIPlayerVodStrategyModel are shown in the following table:
    Parameter name
    Implication
    mPreloadConcurrentCount
    The number of video caches, default is 3
    mPreloadBufferSizeInMB
    Pre-play size, in MB, default 0.5MB
    preferredResolution
    Preferred resolution, default 720 * 1280
    progressInterval
    The progress bar callback interval, in milliseconds, default is 500ms
    renderMode
    Canvas fill style, the default image adapts to the screen to keep the picture intact
    extInfoMap
    Additional parameters, reserved
    enableAutoBitrate
    Whether to enable adaptive bitrate, default is NO
    mediaType
    Set the media type
    maxBufferSize
    Maximum preload size, in MB, default 10MB, this setting will affect playableDuration, the larger the setting, the more pre-cached
    mResumeModel
    Resume mode, default value is TUI_RESUM_MODEL_NONE
    preDownloadSize
    Pre-download size, in MB, default 1MB
    enableAccurateSeek
    Whether to seek accurately, the default is YES. After turning on accurate seek, the seek time will be 200ms longer on average
    audioNormalization
    Volume balance. Loudness range: -70~0 (LUFS). This configuration requires LiteAVSDK 11.7 and above.
    The following constants are for reference:
    Off: AUDIO_NORMALIZATION_OFF (TXVodPlayConfig.h)
    On (standard loudness): AUDIO_NORMALIZATION_STANDARD (TXVodPlayConfig.h)
    On (low loudness): AUDIO_NORMALIZATION_LOW (TXVodPlayConfig.h)
    On (high loudness): AUDIO_NORMALIZATION_HIGH (TXVodPlayConfig.h)
    The default value is AUDIO_NORMALIZATION_OFF.
    isLastPrePlay
    Whether to keep the last pre-play, the default is NO
    subtitleRenderModel
    Subtitle style
    Then configure the player strategy:
    TUIPlayerStrategyModel *model = [[TUIPlayerStrategyModel alloc] init];
    model.mPreloadConcurrentCount = 1;
    model.preDownloadSize = 1;
    model.enableAutoBitrate = NO;
    model.mRenderMode = TUI_RENDER_MODE_FILL_SCREEN;
    model.mResumeModel = TUI_RESUM_MODEL_LAST;
    [_videoView setShortVideoStrategyModel:model];

    3.2. Live broadcast strategy settings

    You can use the TUIPlayerLiveStrategyModel model to configure the on-demand playback strategy.
    The main parameters of TUIPlayerLiveStrategyModel are shown in the following table:
    Parameter name
    Implication
    isLastPrePlay
    Whether to keep the last pre-play, the default is NO
    mRenderMode
    Canvas fill style, default V2TXLiveFillModeFill
    enablePictureInPicture
    YES: Enable the PIP function; NO: Disable the PIP function. Default value: NO.
    volume
    The volume of the player, ranging from 0 to 100. Default value: 100.
    maxAutoAdjustCacheTime
    The maximum time for automatic adjustment of the player cache, in seconds. The value must be greater than 0. The default value is 5.
    minAutoAdjustCacheTime
    The minimum time for automatic adjustment of the player cache, in seconds. The value must be greater than 0. The default value is 1.
    isShowDebugView
    Whether to display the debug overlay of player status information. Default value: NO.
    Then configure the player strategy:
    
    TUIPlayerLiveStrategyModel *liveStrategyModel = [[TUIPlayerLiveStrategyModel alloc] init];
    [_videoView setShortVideoLiveStrategyModel:liveStrategyModel];

    3.3. Dynamic policy adjustment

    Both on-demand and live broadcast strategies support dynamic adjustment. The steps are as follows::
    1、Get the live broadcast & on-demand strategy management class through TUIShortVideoView.
    
    TUIPlayerVodStrategyManager *VodStrategyManager = [_videoView getVodStrategyManager]
    TUIPlayerVodStrategyManager *LiveStrategyManager = [_videoView getLiveStrategyManager]
    2、Adjust playback strategies through VodStrategyManager and LiveStrategyManager.
    
    [VodStrategyManager setRenderMode:TUI_RENDER_MODE_FILL_EDGE];
    [LiveStrategyManager setRenderMode:V2TXLiveFillModeFill];

    4.Data Management

    4.1. Data Model

    The original data model of TUIShortVideoView includes:
    Parameter name
    Implication
    TUIPlayerDataModel
    Basic data types
    TUIPlayerVideoModel
    Video data type, inherited from TUIPlayerDataModel
    TUIPlayerLiveModel
    Vive data type, inherited from TUIPlayerDataModel
    TUIPlayerDataModel
    Parameter name
    Implication
    modelType
    Model Type
    extInfo
    Business data
    onExtInfoChangedBlock
    ExtInfo The block where the data has changed
    extInfoChangeNotify
    Notify extInfo that data has changed
    asVodModel
    Force conversion to TUIPlayerVideoModel type
    asLiveModel
    Force conversion to TUIPlayerLiveModel type
    TUIPlayerVideoModel
    Parameter name
    Implication
    videoUrl
    Video URL
    coverPictureUrl
    Cover picture url
    duration
    duration
    appId
    appid
    fileId
    fileId
    pSign
    Signature String
    subtitles
    Subtitle information
    config
    Separate configuration of video, see TUIPlayerVideoConfig for details
    TUIPlayerLiveModel
    Parameter name
    Implication
    liveUrl
    Live URL
    coverPictureUrl
    cover picture url

    4.2. Model Construction

    Build a set of on-demand data models
    
    TUIPlayerVideoModel *model = [[TUIPlayerVideoModel alloc] init];
    model.videoUrl = @"xxxx";
    model.coverPictureUrl = @"xxxx";
    model.duration = @"xxxx";
    model.appId = @"xxxx";
    model.fileId = @"xxxx";
    model.pSign = @"xxxx";
    NSDictionary *extr = @{
    @"name":@"@Mars",
    @"titile":@"This is a vod broadcast interface",
    @"des":@"This is a vod broadcast interface"
    };
    model.extInfo = extr;
    [modelArray addObject:model];
    Build a set of live data models
    
    TUIPlayerLiveModel *model = [[TUIPlayerLiveModel alloc] init];
    model.liveUrl = @"xxxx";
    model.coverPictureUrl = @"xxxx";
    NSDictionary *extr = @{
    @"name":@"@Mars",
    @"liveTitile":@"This is a live broadcast interface",
    @"liveDes":@"This is a live broadcast interface"
    };
    model.extInfo = extr;
    
    Build a set of other types of data models
    /// 1 Carousel
    TUIPlayerDataModel *model = [[TUIPlayerDataModel alloc] init];
    NSDictionary *extr = @{
    @"images":@"xxxx",
    @"url":@"https://cloud.tencent.com",
    @"titile":@"This is a picture carousel display interface",
    @"des":@"This is a picture carousel display interface",
    @"name":@"@Mars",
    @"type":@"imageCycle"
    };
    model.extInfo = extr;
    [modelArray insertObject:model atIndex:1];
    
    /// 2 Graphic Ads
    TUIPlayerDataModel *model1 = [[TUIPlayerDataModel alloc] init];
    NSDictionary *extr1 = @{
    @"adUrl":@"https://cloud.tencent.com",
    @"adUrl":@"https://cloud.tencent.com/document/product",
    @"adTitile":@"This is a web display interface",
    @"adDes":@"This is a web display interface",
    @"name":@"@Mars",
    @"type":@"ad"
    };
    model1.extInfo = extr1;
    [modelArray insertObject:model1 atIndex:1];
    
    Attention:
    TUIPlayerDataModel is a large class that applies to all non-on-demand and live data types.
    Users can use extInfo to perform more detailed classification. For example, in the figure above, two types of data, "carousel" and "graphic advertisement", are constructed through TUIPlayerDataModel, which can be classified by extInfo/type.
    extInfo is a flexible word, and users can design the data structure they need at will.

    4.3. Dynamic adjustment of data

    TUIShortVideoView provides a data management class TUIShortVideoDataManager for external data operations. Its main function is to perform basic operations such as adding, deleting, modifying, and checking the data in the current player list. See the following demonstration code:
    ///1、Delete the data and view at index 1
    [[self.videoView getDataManager] removeData:1];
    ///2、Add a set of data to index 9
    TUIPlayerVideoModel *model = [[TUIPlayerVideoModel alloc] init];
    model.viewType = TUI_ITEM_VIEW_TYPE_CUSTOM;
    [[self.videoView getDataManager] addData:model index:9];
    A more detailed interface description is as follows:
    Parameter name
    Implication
    removeData
    Remove data by index
    removeRangeData
    Remove data by range
    removeDataByIndex
    Remove data by index array
    addData:index
    Add data by index
    addRangeData:startIndex
    Add data from a certain index according to the model array
    replaceData:index
    Replace data by index
    replaceRangeData:startIndex
    Replace data from a certain index in the model array
    getDataByPageIndex
    Read data at a certain index
    getCurrentDataCount
    Get the total number of data in the current playlist
    getCurrentIndex
    Get the data index of the current playback interface
    getCurrentModel
    Get the data model of the current playback interface
    Explanation:
    The UI interface is automatically refreshed after the DataManager interface is called.
    If the current playback interface is not operated, there will be no refresh.
    Operating the current interface will refresh the current interface.
    If the current playback interface is deleted, the next one will be played automatically. If there is no data for the next one (it has reached the end), the previous one will be played.

    5. Custom UI Layers

    5.1. Hierarchy

    The hierarchical structure of TUIPlayerShortVideo is as follows:
    
    
    
    
    It is divided into a display layer and a control layer, and the two are combined in a stacked manner.
    The display layer is responsible for content display, on-demand, live broadcast, advertising promotion pages, etc. This layer is managed internally by the SDK.
    The control layer is responsible for interaction, likes, comments, etc. This layer is left to the user to achieve a high degree of customization.

    5.2. TUIPlayerShortVideoUIManager

    You can use the TUIPlayerShortVideoUIManager interface and the protocol control layer interface to implement your custom UI. See the following code:
    TUIPlayerShortVideoUIManager *uiManager = [[TUIPlayerShortVideoUIManager alloc] init];
    [uiManager setControlViewClass: TUIPSControlView.class];
    [uiManager setLoadingView:[[TUIPSLoadingView alloc] init]];
    [uiManager setBackgroundView:[UIView new]];
    _videoView = [[TUIShortVideoView alloc] initWithUIManager:uiManager];
    The above code customizes the video control layer (progress bar, time, etc.) named TUIPSControlView and the loading control named TUIPSLoadingView through TUIPlayerShortVideoUIManager.
    The interface of TUIPlayerShortVideoUIManager is shown in the following table:
    Parameter name
    Implication
    setLoadingView
    Setting up the loading graph
    setBackgroundView
    Set the background image
    setErrorView
    Setting the error interface
    setControlViewClass
    Set the video control layer * @param ViewClass control layer class, ViewClass is the video control View you have encapsulated, including controls such as progress bar, time label, etc. * It will be covered on the video window as a whole, and its size is consistent with the video window
    setControlViewClass :viewType
    Set up different types of video control layers
    getLoadingView
    Get the loading image View instance
    getBackgroundView
    Get the background image View instance
    getErrorView
    Get the error interface View instance
    getControlViewClass
    Get the video control interface View class
    getControlViewClassWithViewType
    Get different types of video control interface classes
    The playback layer currently supports two types:
    TUI_ITEM_VIEW_TYPE_VOD ///video
    TUI_ITEM_VIEW_TYPE_LIVE ///live
    TUI_ITEM_VIEW_TYPE_CUSTOM /// Custom type (such as advertising page)
    The corresponding control layer protocol also supports two types:
    TUIPlayerShortVideoControl ///Video Control Layer Protocol
    TUIPlayerShortVideoLiveControl ///Live broadcast control layer protocol
    TUIPlayerShortVideoCustomControl ///Custom control layer protocol
    explanation:
    All non-VOD and live interfaces are presented with TUI_ITEM_VIEW_TYPE_VOD and TUIPlayerShortVideoCustomControl. Custom is a large category, and the specific subdivisions need to be defined by the user on this whiteboard. As mentioned in the TUIPlayerDataModel model construction above, more fine-grained divisions can be made through extInfo/type or other fields under extInfo.
    The specific interface description of TUIPlayerShortVideoControl protocol is as follows:
    Parameter name
    Implication
    delegate
    A reverse proxy for interaction between the control layer and the playback layer
    model
    The currently playing video model
    currentPlayerStatus
    The current player's playback status
    showCenterView
    Display center view
    hideCenterView
    Hide center view
    showLoadingView
    Display loading graph
    hiddenLoadingView
    Hide loading image
    setDurationTime
    Total video time
    setCurrentTime
    Current playback time
    setProgress
    Progress bar progress
    showSlider
    Show progress bar
    hideSlider
    Hide progress bar
    reloadControlData
    Triggering a view refresh
    getPlayer
    Get the player object
    onPlayEvent
    Get player events
    getVideoLayerRect
    Get the changes of the video rendering area
    getVideoWidget
    Get the video rendering layer object
    The specific interface description of TUIPlayerShortVideoLiveControl protocol is as follows:
    Parameter name
    Implication
    delegate
    A reverse proxy for interaction between the control layer and the playback layer
    model
    Current playback data model
    reloadControlData
    Triggering a view refresh
    getPlayer
    Get the player object
    getVideoLayerRect
    Get the video layer area
    getVideoWidget
    Get the video rendering layer
    The specific interface description of TUIPlayerShortVideoCustomControl protocol is as follows:
    Parameter name
    Implication
    delegate
    A reverse proxy for interaction between the control layer and the playback layer
    model
    Current playback data model
    reloadControlData
    Triggering a view refresh
    Attention:
    The custom control layer View passed in needs to comply with the relevant protocols, otherwise the compilation will fail.

    5.3. Example

    Type
    video
    live
    Custom (slideshow)
    Custom (graphic and text ads)
    example
    
    
    
    
    
    
    
    
    
    
    
    
    5.3.1. Define UI styles under different styles
    vod style (TUIPlayerShortVideoControl)
    
    @interface TUIPSControlView : UIView<TUIPlayerShortVideoControl>
    @property (nonatomic, strong) TUIPlayerVideoModel *videoModel
    @end
    @implementation TUIPSControlView
    
    -(instancetype)initWithFrame:(CGRect)frame {
    if ([super initWithFrame:frame]){
    /// UI layout code
    }
    return self;
    }
    
    -(void)setModel:(TUIPlayerVideoModel *)model {
    _model = model;
    /// data
    }
    @end
    Live broadcast style (TUIPlayerShortVideoLiveControl)
    
    @interface TUIPSControlLiveView : UIView<TUIPlayerShortVideoLiveControl>
    @property (nonatomic, strong) TUIPlayerLiveModel *videoModel
    @end
    @implementation TUIPSControlLiveView
    -(instancetype)initWithFrame:(CGRect)frame {
    if ([super initWithFrame:frame]){
    /// UI layout code
    }
    return self;
    }
    
    -(void)setModel:(TUIPlayerLiveModel *)model {
    _model = model;
    /// data
    }
    @end
    Other styles such as carousel & graphic ads (TUIPlayerShortVideoCustomControl)
    
    @interface TUIPSControlCustomView : UIView<TUIPlayerShortVideoCustomControl>
    @property (nonatomic, strong) TUIPlayerDataModel *videoModel
    @end
    @implementation TUIPSControlCustomView
    -(instancetype)initWithFrame:(CGRect)frame {
    if ([super initWithFrame:frame]){
    /// UI layout code
    }
    return self;
    }
    
    -(void)setModel:(TUIPlayerDataModel *)model {
    _model = model;
    /// data
    NSDictionary *dic = model.extInfo;
    NSString *adTitile = [dic objectForKey:@"adTitile"];
    NSString *adDes = [dic objectForKey:@"adDes"];
    NSString *adUrl = [dic objectForKey:@"adUrl"];
    NSString *name = [dic objectForKey:@"name"];
    NSString *type = [dic objectForKey:@"type"];
    
    if ([type isEqualToString:@"ad"]) { ///Graphic Ads
    self.webView.hidden = NO;
    self.cycleScrollView.hidden = YES;
    self.desLabel.textColor = [UIColor blackColor];
    self.nameLabel.textColor = [UIColor blackColor];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:adUrl]]];
    } else if ([type isEqualToString:@"imageCycle"]) { ///Carousel
    self.webView.hidden = YES;
    self.cycleScrollView.hidden = NO;
    self.desLabel.textColor = [UIColor whiteColor];
    self.nameLabel.textColor = [UIColor whiteColor];
    NSString *imagesStr = [dic objectForKey:@"images"];
    NSArray *imagesArray = [imagesStr componentsSeparatedByString:@"<:>"];
    self.cycleScrollView.imageURLStringsGroup = imagesArray;
    }
    
    }
    @end
    5.3.2. Register the created style through TUIPlayerShortVideoUIManager
    TUIPlayerShortVideoUIManager *uiManager = [[TUIPlayerShortVideoUIManager alloc] init];
    [uiManager setControlViewClass: TUIPSControlView.class viewType:TUI_ITEM_VIEW_TYPE_VOD];
    [uiManager setControlViewClass: TUIPSControlLiveView.class viewType:TUI_ITEM_VIEW_TYPE_LIVE];
    [uiManager setControlViewClass: TUIPSControlCustomView.class viewType:TUI_ITEM_VIEW_TYPE_CUSTOM];
    5.3.2. Initialize TUIShortVideoView through TUIPlayerShortVideoUIManager
    _videoView = [[TUIShortVideoView alloc] initWithUIManager:uiManager];
    5.3.3. Use setShortVideoStrategyModel and setShortVideoLiveStrategyModel to set the strategies for video on demand and live streaming.
    // Set your playback strategy
    TUIPlayerVodStrategyModel *model = [[TUIPlayerVodStrategyModel alloc] init];
    model.mPreloadConcurrentCount = 1;
    model.preDownloadSize = 1;
    model.enableAutoBitrate = NO;
    [_videoView setShortVideoStrategyModel:model];
    // live strategy
    TUIPlayerLiveStrateyModel *liveStrateyModel = [[TUIPlayerLiveStrateyModel alloc] init];
    [_videoView setShortVideoLiveStrategyModel:liveStrateyModel];
    5.3.4. The relationship between UI and data
    TUIPSControlView & TUIPSControlLiveView & TUIPSControlCustomView can be understood as preset templates. When TUIShortVideoView is initialized, various types of templates have been preset. When the corresponding data type is slipped, the current template will be displayed.
    Type
    Data model
    UI Templates
    Vod
    TUIPlayerVideoModel
    TUIPSControlView
    Live
    TUIPlayerLiveModel
    TUIPSControlLiveView
    Custom types (carousel, graphic ads, etc.)
    TUIPlayerDataModel
    TUIPSControlCustomView
    UI templates are pre-set
    The UI style is displayed according to the driver of the corresponding data type.
    5.3.4. Interaction between UI template and TUIShortVideoView
    The custom UI template interacts with TUIShortVideoView through the corresponding protocol. TUIShortVideoView passes messages to TUIPSControlView & TUIPSControlLiveView & TUIPSControlCustomView through the protocol methods of TUIPlayerShortVideoControl &TUIPlayerShortVideoLiveControl &TUIPlayerShortVideoCustomControl.
    As VOD:
    
    -(void)setModel:(TUIPlayerVideoModel *)model {
    
    if ([_model observationInfo]) {
    
    [_model removeObserver:self forKeyPath:@"preloadState"];
    
    }
    _model = model;
    [model addObserver:self forKeyPath:@"preloadState" options:NSKeyValueObservingOptionNew context:nil];
    
    NSDictionary *dic = model.extInfo;
    NSString *iconUrl = [dic objectForKey:@"iconUrl"];
    NSString *advertise = [dic objectForKey:@"advertise"];
    NSString *name = [dic objectForKey:@"name"];
    NSString *title = [dic objectForKey:@"title"];
    NSString *topic = [dic objectForKey:@"topic"];
    self.iconImageView.image = [UIImage imageNamed:iconUrl];
    [self.adButton setTitle:advertise forState:UIControlStateNormal];
    self.nameLabel.text= name;
    self.themeLabel.text = topic;
    self.desLabel.text = title;
    [self updatePreloadState];
    [self updateLickCount];
    model.onExtInfoChangedBlock = ^(id _Nonnull extInfo) {
    [self updateLickCount];
    };
    }
    
    Live:
    
    -(void)setModel:(TUIPlayerLiveModel *)model {
    
    _model = model;
    NSDictionary *dic = model.extInfo;
    NSString *adTitile = [dic objectForKey:@"liveTitile"];
    NSString *adDes = [dic objectForKey:@"liveDes"];
    NSString *name = [dic objectForKey:@"name"];
    self.nameLabel.text = name;
    self.desLabel.text = adTitile;
    }
    Custom (carousel, pictures and text, etc.)
    
    -(void)setModel:(TUIPlayerDataModel *)model {
    
    _model = model;
    NSDictionary *dic = model.extInfo;
    NSString *adTitile = [dic objectForKey:@"adTitile"];
    NSString *adDes = [dic objectForKey:@"adDes"];
    NSString *adUrl = [dic objectForKey:@"adUrl"];
    NSString *name = [dic objectForKey:@"name"];
    NSString *type = [dic objectForKey:@"type"];
    self.desLabel.text = adTitile;
    self.nameLabel.text = name;
    if ([type isEqualToString:@"web"]) {
    self.webView.hidden = NO;
    self.cycleScrollView.hidden = YES;
    self.desLabel.textColor = [UIColor blackColor];
    self.nameLabel.textColor = [UIColor blackColor];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:adUrl]]];
    } else if ([type isEqualToString:@"imageCycle"]) {
    self.webView.hidden = YES;
    self.cycleScrollView.hidden = NO;
    self.desLabel.textColor = [UIColor whiteColor];
    self.nameLabel.textColor = [UIColor whiteColor];
    NSString *imagesStr = [dic objectForKey:@"images"];
    NSArray *imagesArray = [imagesStr componentsSeparatedByString:@"<:>"];
    self.cycleScrollView.imageURLStringsGroup = imagesArray;
    }
    }
    
    TUIPSControlView & TUIPSControlLiveView & TUIPSControlCustomView pass messages to TUIShortVideoView through the delegate of TUIPlayerShortVideoControl &TUIPlayerShortVideoLiveControl &TUIPlayerShortVideoCustomControl.
    As VOD:
    
    @protocol TUIPlayerShortVideoControlDelegate <NSObject>
    
    /**
    * Pause
    */
    - (void)pause;
    /**
    * Resume
    */
    - (void)resume;
    
    /**
    * Sliding scroll bar processing
    * @param time Slide distance
    */
    - (void)seekToTime:(float)time;
    
    /**
    * Is it playing
    */
    - (BOOL)isPlaying;
    
    /**
    * Reset video playback container
    * Used for scenarios where the video playback container needs to be reset after being removed
    */
    - (void)resetVideoWeigetContainer;
    
    @optional
    /**
    * Custom callback events
    */
    - (void)customCallbackEvent:(id)info;
    @end
    
    
    /////transfer
    if (self.delegate && [self.delegate respondsToSelector:@selector(pause)]) {
    [self.delegate pause];
    }
    Live
    
    @protocol TUIPlayerShortVideoLiveControlDelegate <NSObject>
    
    /**
    * pause
    */
    - (void)pause;
    
    /**
    * resume
    */
    - (void)resume;
    
    /**
    * Reset video playback container
    * Used for scenarios where the video playback container needs to be reset after being removed
    */
    - (void)resetVideoWeigetContainer;
    
    @optional
    /**
    * Custom callback events
    */
    - (void)customCallbackEvent:(id)info;
    @end
    
    /////transfer
    if (self.delegate && [self.delegate respondsToSelector:@selector(pause)]) {
    [self.delegate pause];
    }
    Custom (carousel, pictures and text, etc.)
    
    @protocol TUIPlayerShortVideoCustomControlDelegate <NSObject>
    
    @optional
    /**
    * Custom callback events
    */
    - (void)customCallbackEvent:(id)info;
    @end
    
    /////transfer
    if (self.delegate && [self.delegate respondsToSelector:@selector(customCallbackEvent:)]) {
    [self.delegate customCallbackEvent:@"test"];
    }
    explanation:
    See Demo for the complete example.

    Advanced Features

    Business notification message to the page layer

    TUI provides a message interface for users to notify the current layer of data in real time. After obtaining the video object through the data operation object, the notification can be made. The example is as follows:
    /// Get Data Manager
    TUIShortVideoDataManager *dataManager = [self.videoView getDataManager];
    ///Get the data model
    TUIPlayerDataModel *model = [dataManager getDataByPageIndex:1];
    ///Modify the data model
    model.extInfo = @{@"key":@"value"}
    ///Notify data model changes
    [model extInfoChangeNotify];
    The notification is then received in the onExtInfoChanged callback of the UI control layer, so that the UI of the current page can be modified. The example is as follows:
    
    model.onExtInfoChangedBlock = ^(id _Nonnull extInfo) {
    [self updateLickCount];
    };
    Attention:
    This function is only valid for the extInfo field.

    Volume balance on demand

    The player supports automatic volume adjustment when playing audio, so that the volume of all audio is consistent. This can avoid the problem of some audio being too loud or too quiet, and provide a better listening experience.
    By setting the volume balance, the loudness range is: -70~0 (LUFS), and custom values ​​are also supported.
    Attention:
    Supported by Player Premium 11.7.
    
    
    /// Volume balance. Loudness range: -70~0(LUFS). This configuration requires LiteAVSDK 11.7 and above.
    /// The following constants are for reference
    /// Off: AUDIO_NORMALIZATION_OFF (TXVodPlayConfig.h)
    /// On (standard loudness): AUDIO_NORMALIZATION_STANDARD (TXVodPlayConfig.h)
    /// On (low loudness): AUDIO_NORMALIZATION_LOW (TXVodPlayConfig.h)
    /// On (high loudness): AUDIO_NORMALIZATION_HIGH (TXVodPlayConfig.h)
    /// The default value is AUDIO_NORMALIZATION_OFF.
    
    TUIPlayerVodStrategyModel *model = [[TUIPlayerVodStrategyModel alloc] init];
    model.audioNormalization = AUDIO_NORMALIZATION_STANDARD;
    
    [_videoView setShortVideoStrategyModel:model];
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support