tencent cloud

Feedback

iOS Integration Guide

Last updated: 2024-04-18 17:06:53

    Overview

    The iOS Player is an open-source component that allows you to integrate powerful playback capabilities similar to those in Tencent Video into your project with just a few lines of code changes. In addition to basic features such as landscape/portrait orientation, resolution selection, gestures, and small-window playback, it also supports buffering, software/hardware decoding, and changing playback speed. Compared with built-in players, the RT-Cube Player supports more formats, has better compatibility, and offers more capabilities. It also features instant streaming and low latency, and comes with advanced features such as thumbnail generation.
    If the Player component cannot meet your requirements, and you have some knowledge of engineering, you can integrate the Player SDK to customize the UI and playback features.

    Limits

    1. Activate VOD. If you don’t have an account yet, sign up for one first.
    2. Download and install Xcode from App Store.
    3. Download and install CocoaPods as instructed at the CocoaPods website.

    This Document Describes

    Prerequisites

    Step 1. Download the player code package

    GitHub page: LiteAVSDK/Player_iOS
    You can download a ZIP file of the Player component from the GitHub page or use the Git clone command to download the component.
    Download the ZIP file
    Download using Git command
    Go to the GitHub page and click Code > Download ZIP.
    
    
    
    1. First, make sure that your computer has Git installed; if not, you can install it as instructed in Git Installation Tutorial.
    2. Run the following command to clone the code of the Player component to your local system.
    git clone git@github.com:tencentyun/SuperPlayer_iOS.git
    If you see the following information, the project code has been cloned to your local system successfully.
    Cloning to 'SuperPlayer_iOS'...
    remote: Enumerating objects: 2637, done.
    remote: Counting objects: 100% (644/644), done.
    remote: Compressing objects: 100% (333/333), done.
    remote: Total 2637 (delta 227), reused 524 (delta 170), pack-reused 1993
    Receiving the object: 100% (2637/2637), 571.20 MiB | 3.94 MiB/s, done.
    Processing delta: 100% (1019/1019), done.
    Below is the directory structure of the component’s source code after decompression:
    Filename
    Description
    SDK
    The folder of the Player component’s frameworks and static libraries.
    Demo
    The folder of the Player demo.
    App
    The entry point UI.
    SuperPlayerDemo
    The Player demo.
    SuperPlayerKit
    The Player component.

    Step 2. Integrate the component

    This step describes how to integrate the Player component. We recommend you integrate it through CocoaPods or manually download the SDK and then import it into your current project.
    Integrate via CocoaPods
    Manually download the SDK
    1. To install the component using CocoaPods, add the code below to Podfile: (1) Directly integrate SuperPlayer as a Pod:
    pod 'SuperPlayer
    To use the Player edition, add the following dependency to podfile:
    pod 'SuperPlayer/Player'
    To use the Player Premium edition, add the following dependency to podfile:
    pod 'SuperPlayer/Player_Premium'
    To use the All-in-one edition, add the following dependency to podfile:
    pod 'SuperPlayer/Professional'
    2. Run pod install or pod update.
    1. Download the SDK and demo at GitHub.
    2. Import TXLiteAVSDK_Player_Premium.framework into your project and select Do Not Embed.
    3. Copy Demo/TXLiteAVDemo/SuperPlayerKit/SuperPlayer to your project directory.
    4. The third-party libraries the player depends on are AFNetworking, SDWebImage, Masonry, and TXLiteAVSDK_Player.
    To integrate TXLiteAVSDK_Player manually, you need to add the required system frameworks and libraries:
    System frameworks: MetalKit, ReplayKit, SystemConfiguration, CoreTelephony, VideoToolbox, CoreGraphics, AVFoundation, Accelerate, and MobileCoreServices.
    System libraries: libz, libresolv, libiconv, libc++, and libsqlite3.
    For detailed directions, see Manually integrate the SDK. In addition, you need to add TXFFmpeg.xcframework and TXSoundTouch.scframework under the TXLiteAVSDK_Player file as dynamic libraries.
    
    
    5. If you integrate TXLiteAVSDK_Player as a pod, no libraries need to be added.

    Step 3. Use the player features

    This step describes how to create a player and use it for video playback.
    1. Create a player Create a SuperPlayerView object to play videos (SuperPlayerView is the main class of the player).
    // Import the header file
    #import <SuperPlayer/SuperPlayer.h>
    
    // Create a player
    _playerView = [[SuperPlayerView alloc] init];
    // Set a delegate for events
    _playerView.delegate = self;
    // Set the parent view. _playerView will be automatically added under holderView.
    _playerView.fatherView = self.holderView;
    2. License configuration If you have obtained a license, you can view the license URL and key in the VOD console.
    If you don't have the required license yet, you can get it as instructed in Video Playback License.
    After obtaining the License information, you need to initialize and configure the License before calling the relevant interfaces of the SDK. For detailed tutorials, please see Configuring View License.
    3. Video playback: This step describes how to play back a video. The Player for iOS supports playback through FileId in VOD or URL. We recommend you integrate the FileId because it allows you to use more VOD capabilities.
    Play by VOD file ID
    Play by URL
    Play Local video
    A video file ID is returned by the server after the video is uploaded.
    1. After a video is published from a client, the server will return a file ID to the client.
    2. After a video is uploaded to the server, the notification for successful upload will contain a file ID for the video. If the video you want to play is already saved with VOD, you can go to Media Assets to view its file ID.
    
    
    Note:
    1. To play by VOD file ID, you need to use the Adaptive-HLS template (ID: 10) to transcode the video or use the player signature psign to specify the video to play; otherwise, the playback may fail. For more information on how to transcode a video and generate psign, see Play back a video with the Player component and Player Signature.
    2. If a "no v4 play info" error occurs, it indicates that you haven't transcoded the video or used the player signature correctly. Troubleshoot the issue according to the above documents or get the playback URL of the video and play it by URL.
    3. We recommend you transcode videos for playback because untranscoded videos may experience compatibility issues during playback.
    // If you haven't enabled hotlink protection and a "no v4 play info" error occurs, transcode your video using the Adaptive-HLS template (ID: 10) or get the playback URL of the video and play it by URL.
    
    SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
    model.appId = 1400329071;// Configure AppId
    model.videoId = [[SuperPlayerVideoId alloc] init];
    model.videoId.fileId = @"5285890799710173650"; // Configure `FileId`
    // `psign` is a player signature. For more information on the signature and how to generate it, see [Player Signature](https://www.tencentcloud.com/document/product/266/38099).
    model.videoId.pSign = @"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDMyOTA3MSwiZmlsZUlkIjoiNTI4NTg5MDc5OTcxMDE3MzY1MCIsImN1cnJlbnRUaW1lU3RhbXAiOjEsImV4cGlyZVRpbWVTdGFtcCI6MjE0NzQ4MzY0NywidXJsQWNjZXNzSW5mbyI6eyJ0IjoiN2ZmZmZmZmYifSwiZHJtTGljZW5zZUluZm8iOnsiZXhwaXJlVGltZVN0YW1wIjoyMTQ3NDgzNjQ3fX0.yJxpnQ2Evp5KZQFfuBBK05BoPpQAzYAWo6liXws-LzU";
    [_playerView playWithModelNeedLicence:model];
    
    SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
    model.videoURL = @"http://your_video_url.mp4"; // Enter the URL of the video to play
    [_playerView playWithModelNeedLicence:model];
    SuperPlayerModel *model = [[SuperPlayerModel alloc]init];
    //Add your video file to the project, and then get the file path of the video through NSBundle
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"your_video_name" ofType:@"mp4"];
    model.videoURL = [filePath stringByReplacingOccurrencesOfString:@"file://" withString:@""];
    [_playerView playWithModelNeedLicence:model];
    4.Stop playback
    If the player is no longer needed, call resetPlayer to reset the player and free up memory.
    [_playerView resetPlayer];
    At this point, you have learned how to create a player, use it to play videos, and stop playback.

    More Features

    1. Full screen playback

    The Player component supports full screen playback, where it allows setting screen lock, volume and brightness control through gestures, on-screen commenting, screencapturing, and definition selection. This feature can be tried out in TCToolkit App > Player > Player Component, and you can enter the full screen playback mode by clicking the full screen icon.
    You can call the API below to enter full screen from the windowed playback mode:
    - (void)superPlayerFullScreenChanged:(SuperPlayerView *)player {
    // You can customize the logic after switching to the full screen mode here
    }

    Features of full screen playback mode

    Back to windowed mode
    Enable screen locking
    On-screen comments
    Screenshot
    Change resolution
    Tap the back button to return to the windowed mode. The delegate method that will be triggered after the SDK implements the logic for exiting full screen is as follows:
    // The back button tapping event
    - (void)superPlayerBackAction:(SuperPlayerView *)player;
    Triggered by tapping of the back button at the top left
    // The exit full screen notification
    - (void)superPlayerFullScreenChanged:(SuperPlayerView *)player;
    Screen locking disables touch screen and allows users to enter an immersive playback mode. The SDK will handle the tapping event and no callbacks will be sent.
    // Use the API below to enable/disable screen locking
    @property(nonatomic, assign) BOOL isLockScreen;
    After the on-screen commenting feature is enabled, text comments sent by users will be displayed on the screen.
    Get the SPDefaultControlView object and, during initialization of the player view, set an event for the on-screen comment button of SPDefaultControlView. The on-screen comment content and view are customized by yourself. For details, see CFDanmakuView, CFDanmakuInfo, and CFDanmaku in SuperPlayerDemo.
    SPDefaultControlView *dv = (SPDefaultControlView *)**self**.playerView.controlView;
    [dv.danmakuBtn addTarget:**self** action:**@selector**(danmakuShow:) forControlEvents:UIControlEventTouchUpInside];
    CFDanmakuView: Configure the attributes of on-screen commenting during initialization.
    // The following attributes are required--------
    // On-screen time
    @property(nonatomic, assign) CGFloat duration;
    // On-screen time in the center, at top, and at bottom
    @property(nonatomic, assign) CGFloat centerDuration;
    // On-screen comment line height
    @property(nonatomic, assign) CGFloat lineHeight;
    // Spacing between on-screen comment lines
    @property(nonatomic, assign) CGFloat lineMargin;
    
    // Maximum number of on-screen comment lines
    @property(nonatomic, assign) NSInteger maxShowLineCount;
    
    // Maximum number of on-screen comment lines in the center, at top, and at bottom
    @property(nonatomic, assign) NSInteger maxCenterLineCount;
    The Player component allows users to take and save a screenshot of a video during playback. The SDK will handle the screenshot button tapping event and no callbacks will be sent for successful or failed screenshots. Screenshots are saved to the phone album.
    Users can change the video definition (such as SD, HD, and FHD) during playback. After the definition selection button is tapped, the SDK will implement the logic for displaying the definition selection view and handle the selection event. No callbacks will be sent.

    2. Floating window playback

    The Player component supports playback in a small floating window, which allows users to switch to another page of the application without interrupting the video playback. You can try out this feature in TCToolkit App > Player > Player Component by tapping Back in the top-left corner.
    
    
    
    // Tapping the back button during playback in portrait mode will trigger the API
    [SuperPlayerWindowShared setSuperPlayer:self.playerView];
    [SuperPlayerWindowShared show];
    // The API triggered by tapping the floating window to return to the main window
    SuperPlayerWindowShared.backController = self;

    3. Thumbnail

    The Player component supports customizing a video thumbnail, which is displayed before the callback is received for playing back the first video frame. This feature can be tried out in TCToolkit App > Player > Player Component > Thumbnail Customization Demo.
    When the Player component is set to the automatic playback mode PLAY_ACTION_AUTO_PLAY, the thumbnail will be displayed before the first video frame is loaded.
    When the Player component is set to the manual playback mode PLAY_ACTION_MANUAL_PLAY, videos are played only after users tap the play button, and the thumbnail will be displayed until the first video frame is loaded.
    You can set the thumbnail by specifying the URL of a local or online file. For detailed directions, see the code below. If you play by VOD file ID, you can also set the thumbnail in the VOD console.
    SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
    SuperPlayerVideoId *videoId = [SuperPlayerVideoId new];
    videoId.fileId = @"8602268011437356984";
    model.appId = 1400329071;
    model.videoId = videoId;
    // Playback mode, which can be set to automatic (`PLAY_ACTION_AUTO_PLAY`) or manual (`PLAY_ACTION_MANUAL_PLAY`)
    model.action = PLAY_ACTION_MANUAL_PLAY;
    // Specify the URL of an online file to use as the thumbnail. If `coverPictureUrl` is not set, the thumbnail configured in the VOD console will be used.
    model.customCoverImageUrl = @"http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/cc1e28208602268011087336518/MXUW1a5I9TsA.png";
    [self.playerView playWithModelNeedLicence:model];

    4. Video playlist loop

    The Player component supports looping video playlists.
    After a video ends, the next video in the list can be played automatically or users can manually start the next video.
    After the last video in the list ends, the first video in the list will start automatically.
    You can try out this feature in TCToolkit App > Player > Player Component > Video List Loop Demo.
    // Step 1. Create a `NSMutableArray` for the loop data
    NSMutableArray *modelArray = [NSMutableArray array];
    SuperPlayerModel *model = [SuperPlayerModel new];
    SuperPlayerVideoId *videoId = [SuperPlayerVideoId new];
    videoId.fileId = @"8602268011437356984";
    model.appId = 1252463788;
    model.videoId = videoId;
    [modelArray addObject:model];
    
    model = [SuperPlayerModel new];
    videoId = [SuperPlayerVideoId new];
    videoId.fileId = @"4564972819219071679";
    model.appId = 1252463788;
    model.videoId = videoId;
    [modelArray addObject:model];
    
    // Step 2. Call the loop API of `SuperPlayerView`
    [self.playerView playWithModelListNeedLicence:modelArray isLoopPlayList:YES startIndex:0];
    (void)playWithModelListNeedLicence:(NSArray *)playModelList isLoopPlayList:(BOOL)isLoop startIndex:(NSInteger)index;
    API parameters:
    Parameter
    Type
    Description
    playModelList
    NSArray *
    Loop data list
    isLoop
    Boolean
    Whether to loop the playlist
    index
    NSInteger
    Index of the video from which to start the playback

    5. Picture-in-Picture (PiP) feature

    The Picture-in-Picture (PiP) feature has been launched on iOS 9 but can currently be used only on iPads. To use PiP on an iPhone, you need to update the iOS version to iOS 14.
    The Player component supports both in-app PiP and system-wide PiP. To use the feature, you need to enable background modes: In Xcode, choose your target, click Signing & Capabilities > +Capability > Background Modes, and select Audio, AirPlay, and Picture in Picture.
    
    
    
    Code sample for using PiP capabilities:
    // Enter the PiP mode
    if (![TXVodPlayer isSupportPictureInPicture]) {
    return;
    }
    [_vodPlayer enterPictureInPicture];
    
    // Exit the PiP mode
    [_vodPlayer exitPictureInPicture];

    6. Video preview

    The Player component supports video preview, which is useful if you want to allow non-subscribers to watch the beginning of a video. We offer parameters for you to set the video preview duration, pop-up message, and preview end screen. You can find a demo for this feature in the TCToolkit app: Player > Player Component > Preview Feature Demo.
    // Step 1. Create a preview model
    TXVipWatchModel *model = [[TXVipWatchModel alloc] init];
    model.tipTtitle = @"You can preview 15 seconds of the video. Become a subscriber to watch the full video.";
    model.canWatchTime = 15;
    // Step 2. Set the preview model
    self.playerView.vipWatchModel = model;
    // Step 3. Call the method below to display the preview
    [self.playerView showVipTipView];
    TXVipWatchModel class parameter description:
    Parameter
    Type
    Description
    tipTtitle
    NSString
    Pop-up message
    canWatchTime
    float
    Preview duration in seconds

    7. Dynamic watermark

    The Player component allows you to add a randomly moving text watermark to protect your content against piracy. Watermarks are visible in both the full screen mode and windowed mode. The text, font size, and color of a watermark are customizable. You can find a demo for this feature in the TCToolkit app: Player > Player Component > Dynamic Watermark Demo.
    // Step 1. Create a video source information model
    SuperPlayerModel * playermodel = [SuperPlayerModel new];
    // Add other information of the video source
    // Step 2. Create a dynamic watermark model
    DynamicWaterModel *model = [[DynamicWaterModel alloc] init];
    // Step 3. Set the data of the dynamic watermark
    model.dynamicWatermarkTip = @"shipinyun";
    model.textFont = 30;
    model.textColor = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:0.8];
    playermodel.dynamicWaterModel = model;
    // Step 4. Call the method below to display the dynamic watermark
    [self.playerView playWithModelNeedLicence:playermodel];
    Parameters for DynamicWaterModel:
    Parameter
    Type
    Description
    dynamicWatermarkTip
    NSString
    Watermark text
    textFont
    CGFloat
    Font size
    textColor
    UIColor
    Text color

    8. Video download

    Video download allows users to cache online videos and watch them offline. The cached video can be played back only in the client but cannot be actually downloaded to the device. This feature can effectively prevent downloaded videos from being distributed without authorization and protect the video security. You can try out this feature in full screen mode in TCToolkit App > Player > Player Components > Offline Cache.
    
    
    
    VideoCacheView (cache selection list view) is used to select and download videos at different definitions. After selecting the definition in the top-left corner, click the option of the video to be downloaded. When a check mark appears, the download has started. After clicking the video download list button below, you will be redirected to the Activity where VideoDownloadListView is located.
    // Step 1. Initialize the cache selection list view
    //@property (nonatomic, strong) VideoCacheView *cacheView;
    _cacheView = [[VideoCacheView alloc] initWithFrame:CGRectZero];
    _cacheView.hidden = YES;
    [self.playerView addSubview:_cacheView];
    
    // Step 2. Set the options of the video being played back
    [_cacheView setVideoModels:_currentPlayVideoArray currentPlayingModel:player.playerModel];
    
    // Click event of the **video download list** button
    - (UIButton *)viewCacheListBtn;
    - (void)setVideoModels:(NSArray *)models currentPlayingModel:(SuperPlayerModel *)currentModel;
    API parameters:
    Parameter
    Type
    Description
    models
    NSArray
    The video data model of the download list
    SuperPlayerModel
    currentModel
    The video data model of the video being played back
    VideoCacheListView (video download list)
    displays the list of views of all the videos that are being downloaded and have been downloaded.
    When this button is clicked:
    if the download is in progress, it will be paused.
    if it is paused,it will be resumed.
    if it has completed, the video will be played back.
    
    
    
    // Add data, which is obtained from the `TXVodDownloadManager#getDownloadMediaInfoList` API.
    NSArray<TXVodDownloadMediaInfo *> *array = [[[TXVodDownloadManager shareInstance] getDownloadMediaInfoList] mutableCopy];
    for (TXVodDownloadMediaInfo *info in array) {
    VideoCacheListModel *model = [[VideoCacheListModel alloc] init];
    model.mediaInfo = info;
    [self.videoCacheArray addObject:model];
    }
    
    // List items support operations such as click to play and hold and press to delete.
    - (void)longPress:(UILongPressGestureRecognizer *)longPress; // Hold and press
    The downloaded video supports playing without network connection, please refer to the following code when playing:
    NSArray<TXVodDownloadMediaInfo *> *mediaInfoList = [[TXVodDownloadManager shareInstance] getDownloadMediaInfoList];
    TXVodDownloadMediaInfo *mediaInfo = [mediaInfoList firstObject];
    SuperPlayerUrl *superPlayerUrl = [[SuperPlayerUrl alloc] init];
    superPlayerUrl.title = @"*********";
    superPlayerUrl.url = mediaInfo.playpath;
    NSArray<SuperPlayerUrl *> *multiVideoURLs = @[superPlayerUrl];
    SuperPlayerModel *playerModel = [[SuperPlayerModel alloc] init];
    playerModel.multiVideoURLs = multiVideoURLs;
    [self.playerView playWithModelNeedLicence:playerModel];
    Note:
    When video files are downloaded without network playback, be sure to obtain the download list and play through the PlayPath of the video object TXVodDownloadMediaInfo in the download list, and do not directly save the PlayPath object.

    9. Image sprite and timestamp information

    Timestamp information

    You can add text descriptions at key positions on the progress bar, which the user can click to view and quickly understand the video information at the current position. After clicking the video information, the user can seek to the desired position.
    You can try out this feature in full screen mode in TCToolkit App > Player > Player Components > Tencent Cloud Video.
    
    
    

    Image sprite

    Users can view video thumbnails when dragging or seeking on the progress bar so as to quickly understand the video content at the specified position. The thumbnail preview is implemented based on the video's image sprite. You can generate the image sprite of a video file in the VOD console or directly generate an image sprite file. You can try out this feature in full screen mode in TCToolkit App > Player > Player Components > Tencent Cloud Video.
    
    
    
    // Step 1. Get the image sprite and timestamp information in the `onPlayEvent` callback (this works only if the video is played back through `playWithModelNeedLicence`)
    [self.playerView playWithModelNeedLicence:playerModel];
    
    // Step 2. Get keyframes and image sprite information in the `VOD_PLAY_EVT_GET_PLAYINFO_SUCC` callback event for `playWithModelNeedLicence`
    NSString *imageSpriteVtt = [param objectForKey:VOD_PLAY_EVENT_IMAGESPRIT_WEBVTTURL]?:@"";
    NSArray<NSString *> *imageSpriteList = [param objectForKey:VOD_PLAY_EVENT_IMAGESPRIT_IMAGEURL_LIST];
    NSArray<NSURL *> *imageURLs = [self convertImageSpriteList:imageSpriteList];
    [self.imageSprite setVTTUrl:[NSURL URLWithString:imageSpriteVtt] imageUrls:imageURLs];
    
    // Step 3. Display the obtained timestamp information and image sprite on the UI
    if (self.isFullScreen) {
    thumbnail = [self.imageSprite getThumbnail:draggedTime];
    }
    if (thumbnail) {
    [self.fastView showThumbnail:thumbnail withText:timeStr];
    }

    10. External subtitles

    Note:
    External subtitles depend on the premium version SDK of the media player, and the SDK needs to be version 11.3 or above to support it.
    
    
    
    Currently, only SRT and VTT subtitle formats are supported. The usage is as follows:
    Step 1: Add external subtitles.
    Pass the external subtitle category field to SuperPlayerModel#subtitlesArray.
    // // Pass in subtitle url, subtitle name, and subtitle type
    SuperPlayerSubtitles *subtitleModel = [[SuperPlayerSubtitles alloc] init];
    subtitleModel.subtitlesUrl = @"https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-CN.srt";
    subtitleModel.subtitlesName = @"ex-cn-srt";
    subtitleModel.subtitlesType = 0;
    [subtitlesArray addObject:subtitleModel];
    
    // Play
    [self.playerView playWithModelNeedLicence:model];
    Step 2: Switch subtitles after playback.
    // After the video starts playing, select the added external subtitles.
    - (void)controlViewSwitch:(UIView *)controlView withSubtitlesInfo:(TXTrackInfo *)info preSubtitlesInfo:(TXTrackInfo *)preInfo {
    if (info.trackIndex == -1) {
    [self.vodPlayer deselectTrack:preInfo.trackIndex];
    self->_lastSubtitleIndex = -1;
    } else {
    if (preInfo.trackIndex != -1) {
    // Deselect other subtitles if they are not needed
    [self.vodPlayer deselectTrack:preInfo.trackIndex];
    }
    // Select subtitles. [self.vodPlayer
    [self.vodPlayer selectTrack:info.trackIndex];
    self->_lastSubtitleIndex = info.trackIndex;
    }
    }
    Step 3: Configure subtitle styles.
    Subtitle styles can be configured before or during playback.
    TXPlayerSubtitleRenderModel *model = [[TXPlayerSubtitleRenderModel alloc] init];
    model.canvasWidth = 1920; // Subtitle render canvas width
    model.canvasHeight = 1080; // Subtitle render canvas height
    model.isBondFontStyle = NO; // Set whether the subtitle font is bold
    model.fontColor = 0xFF000000; // Set the subtitle font color, default white and opaque
    [_txVodPlayer setSubtitleStyle:model];

    11. Ghost watermark

    The content of the ghost watermark is filled in the player signature and is ultimately displayed on the playback end through collaboration between the cloud and the player, ensuring the security of the watermark throughout the transmission process. Follow the tutorial to configure the ghost watermark in the player signature. The ghost watermark only appears on the video for a very short time, and this flashing has a minimal impact on viewing the video. The position of each watermark appearance is not fixed, which eliminates attempts by others to cover up the watermark. The effect is shown in the figure below. A watermark appears once when the video starts playing, and then disappears. The content of the ghost watermark can be obtained through [param objectForKey:@"EVT_KEY_WATER_MARK_TEXT"] after receiving the VOD_PLAY_EVT_GET_PLAYINFO_SUCC event from the player.
    Note: Supported from player version 11.6.
    
    
    
    // Step 1: Configure the FileId that supports ghost watermark to play the video.
    SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
    model.appId = 1500006438;
    model.videoId = [[SuperPlayerVideoId alloc] init];
    model.videoId.fileId = @"387702307847129127";
    model.videoId.pSign =
    @"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1wIjoxNjg2ODgzMzYwLCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6Imdob3N0IGlzIHdhdGNoaW5nIn19.0G2o4P5xVZ7zFlFUgBLntfX03iGxK9ntD_AONClUUno";
    [_playerView playWithModelNeedLicence:model];
    
    // Step 2: After SuperPlayerView receives the PLAY_EVT_GET_PLAYINFO_SUCC event, obtain the content of the ghost watermark for display.
    - (void)onPlayEvent:(TXVodPlayer *)player event:(int)EvtID withParam:(NSDictionary *)param {
    dispatch_async(dispatch_get_main_queue(), ^{
    if (EvtID == PLAY_EVT_PLAY_EVT_GET_PLAYINFO_SUCCPLAY_PROGRESS) {
    NSString *ghostWaterText = [param objectForKey:@"EVT_KEY_WATER_MARK_TEXT"];
    if (ghostWaterText && ghostWaterText.length > 0) {
    DynamicWaterModel *model = [[DynamicWaterModel alloc] init];
    model.showType = ghost;
    model.duration = self.playerModel.duration;
    model.dynamicWatermarkTip = ghostWaterText;
    model.textFont = 30;
    model.textColor = [UIColor redColor];
    if (![self.subviews containsObject:self.watermarkView]) {
    [self addSubview:self.watermarkView];
    [self.watermarkView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self);
    }];
    }
    [self.watermarkView setDynamicWaterModel:model];
    }
    }
    };
    }

    Demo

    To try out more features, you can directly run the demo project or scan the QR code to download the TCToolkit App demo.

    Running a demo project

    1. In the Demo directory, run the pod update command to generate the TXLiteAVDemo.xcworkspace file again.
    2. Double-click the file to open it, modify the certificate, and run the project on a real device.
    3. After the demo is run successfully, go to Player > Player Component to try out the player features.

    TCToolkit app

    You can try out more features of the Player component in TCToolkit App > Player. During the application upgrade and maintenance, the demo source code can still be used normally.
    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