tencent cloud

Feedback

Integration Guide

Last updated: 2022-05-10 11:59:32

    Overview

    Tencent Cloud RT-Cube Superplayer for iOS is an open-source Tencent Cloud player component. It can provide powerful playback functionality similar to Tencent Video with just a few lines of code. It has basic features such as landscape/portrait mode switching, definition selection, gestures, and small window playback, as well as special features such as video buffering, software/hardware decoding switching, and adjustable-speed playback. It supports more formats and has better compatibility and functionality than system-default players. In addition, it features instant broadcasting of the first frame and low latency and offers advanced capabilities like video thumbnail.

    Preparations

    1. Activate VOD. If you haven't registered an account, sign up first.
    2. Download Xcode from App Store. If you have already done so, skip this step.
    3. Download and install CocoaPods as instructed at the CocoaPods website. If you have already done so, skip this step.

    Content Summary

    Preparations for Integration

    Step 1. Download the project

    The Tencent Cloud RT-Cube Superplayer for iOS can be downloaded here.

    You can download the Tencent Cloud RT-Cube Superplayer for iOS by downloading the player component ZIP package or running the Git command.

    You can directly download the player component ZIP package by clicking Code > Download ZIP.

    Step 2. Integrate the project

    This step describes how to integrate the player. We recommend you integrate it through CocoaPods or manually download the SDK and then import it into your current project.

    1. This project supports installation through CocoaPods. You only need to add the following code to the Podfile:
      pod 'SuperPlayer'
      
    2. Run pod install or pod update.

    Step 3. Use the player features

    This step describes how to create a player and use it for video playback.

    1. Player creation:
      The main class of the player is SuperPlayerView, and videos can be played back after it is created.

      // Import the header file
      #import <SuperPlayer/SuperPlayer.h>
      // Create a player  
      _playerView = [[SuperPlayerView alloc] init];
      // Set the delegate to accept events
      _playerView.delegate = self;
      // Set the parent view. `_playerView` will be automatically added under `holderView`
      _playerView.fatherView = self.holderView;
      
    2. Video playback:
      This step describes how to play back a video. The Tencent Cloud RT-Cube Superplayer for iOS supports playback through FileId in VOD or URL. We recommend you integrate the FileId to use complete capabilities.

      A video FileId is usually returned by the server after the video is uploaded:

      1. After the video is published on the client, the server will return a FileId to the client.
      2. When the video is uploaded to the server, its FileId will be included in the notification of upload confirmation.
        If the file already exists in Tencent Cloud, you can go to Media Assets, find it, and view its FileId as shown below, where ID is the FileId:

      Note
      • For playback through FileId, you need to first use the Adaptive-HLS(10) transcoding template to transcode the video or use the superplayer signature psign to specify the video to be played back; otherwise, the video may fail to be played back. For more information on how to transcode a video, see Playing back Video Through Superplayer. For more information on how to generate a psign, see Superplayer Signature.
      • If a "no v4 play info" exception occurs during playback through FileId, the above problem may exist. In this case, we recommend you make adjustments as instructed above. You can also directly get the playback link of the source video for playback through URL.
      • As an untranscoded source video may experience a compatibility issue during playback, we recommend you transcode videos for playback.

      // During playback with hotlink protection disabled, if a "no v4 play info" exception occurs, we recommend you use the Adaptive-HLS(10) transcoding template to transcode the video or directly get the playback link of the source video for playback through URL.

      SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
      model.appId = 1400329071;// Configure AppId
      model.videoId = [[SuperPlayerVideoId alloc] init];
      model.videoId.fileId = @"5285890799710173650"; // Configure FileId
      // For private encrypted playback, you need to enter the psign, which is a signature for superplayer. For more information on the signature and how to generate it, visit https://intl.cloud.tencent.com/document/product/266/38099
      //model.videoId.pSign = @"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTQwMDMyOTA3MSwiZmlsZUlkIjoiNTI4NTg5MDc5OTcxMDE3MzY1MCIsImN1cnJlbnRUaW1lU3RhbXAiOjEsImV4cGlyZVRpbWVTdGFtcCI6MjE0NzQ4MzY0NywidXJsQWNjZXNzSW5mbyI6eyJ0IjoiN2ZmZmZmZmYifSwiZHJtTGljZW5zZUluZm8iOnsiZXhwaXJlVGltZVN0YW1wIjoyMTQ3NDgzNjQ3fX0.yJxpnQ2Evp5KZQFfuBBK05BoPpQAzYAWo6liXws-LzU";
      [_playerView playWithModel:model];

    • Playback exit:
      When the player is no longer needed, call resetPlayer to clear the internal state of the player and free up the memory.
      [_playerView resetPlayer];
      

    At this point, you have integrated the player creation, video playback, and playback exiting capabilities of the Tencent Cloud RT-Cube Superplayer for iOS.

    Feature Usage

    1. Full screen playback

    The superplayer supports full screen playback, where it allows setting screen lock, volume and brightness control through gesture, on-screen commenting, screencapturing, and definition switch. This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer, and you can enter the full screen playback mode by tapping the full screen icon.

    In window playback mode, the following API can be called to enter the full screen playback mode:

    - (void)superPlayerFullScreenChanged:(SuperPlayerView *)player {
    // You can customize the logic after switching to the full screen mode here
    }
    

    Tap Back to return to the window playback mode. The delegate method that will be triggered after the SDK processes the logic for switching to the full screen mode is as follows:

    // Return the event
    - (void)superPlayerBackAction:(SuperPlayerView *)player;
    Triggered by tapping **Back** in the top-left corner
    // Full screen change notification
    - (void)superPlayerFullScreenChanged:(SuperPlayerView *)player;
    

    2. Floating window playback

    The superplayer supports playback in a small floating window, which allows users to switch to another app without interrupting the video playback. This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer 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. Video thumbnail

    The superplayer supports customizing a video thumbnail for display before the callback for playing back the first video frame is received. This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer > Thumbnail Customization Demo.

    • When the superplayer is set to the automatic playback mode PLAY_ACTION_AUTO_PLAY, the video will be played back automatically, and the thumbnail will be displayed before the first video frame is loaded.
    • When the superplayer is set to the manual playback mode PLAY_ACTION_MANUAL_PLAY, the playback of the video will start only after the user taps Play. The thumbnail will be displayed until the first video frame is loaded.

    A video thumbnail supports the use of a URL or local file address as instructed below. If you play back a video through its FileId, you can directly configure a video thumbnail in VOD.

    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 the automatic `PLAY_ACTION_AUTO_PLAY` or manual `PLAY_ACTION_MANUAL_PLAY`
    model.action  = PLAY_ACTION_MANUAL_PLAY; 
    // Set a URL for the thumbnail. If `coverPictureUrl` is not set, the thumbnail configured in the VOD console will be used automatically
    model.customCoverImageUrl = @"http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/cc1e28208602268011087336518/MXUW1a5I9TsA.png"; 
    [self.playerView playWithModel:model] 
    

    4. Video list loop

    The superplayer supports video list loop; that is, after a video list is given:

    • Videos in the list can be played back in loop. The next video can be played back automatically or switched to manually during playback.
    • After the last video in the list ends, the first video in the list will start automatically.

    This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer > 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 playWithModelList:modelArray isLoopPlayList:YES startIndex:0];
    
    (void)playWithModelList:(NSArray *)playModelList isLoopPlayList:(BOOL)isLoop startIndex:(NSInteger)index;
    

    API parameter description

    Parameter Type Description
    playModelList NSArray * Loop data list
    isLoop Boolean Whether to loop
    index NSInteger Index of the video from which to start the playback

    5. Video preview

    The superplayer supports the video preview feature, which is suitable for non-VIP member preview. You can pass in different parameters to control the video preview duration, prompt message, and preview end screen. This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer > Preview Feature Demo.

    // Step 1. Create a preview model
    TXVipWatchModel *model = [[TXVipWatchModel alloc] init];
    model.tipTtitle = @"You can preview 15 seconds and activate the VIP membership to watch the full video";
    model.canWatchTime = 15;
    // Step 2. Set the preview model
    self.playerView.vipWatchModel = model;
    // Step 3. Call the method to display the preview feature
    [self.playerView showVipTipView];
    

    TXVipWatchModel class parameter description:

    Parameter Type Description
    tipTtitle NSString Preview prompt message
    canWatchTime float Preview duration in seconds

    6. Dynamic watermark

    The superplayer allows you to add an irregular moving text watermark on the playback screen to prevent unauthorized recording. Watermarks can be displayed both in full screen playback mode and window playback mode. You can modify the watermark text, size, and color. This feature can be tried out in Tencent Cloud RT-Cube App > Player > Superplayer > 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 to display the dynamic watermark
    [self.playerView playWithModel:playermodel];
    

    DynamicWaterModel class parameter description:

    Parameter Type Description
    dynamicWatermarkTip NSString Watermark text information
    textFont CGFloat Text size
    textColor UIColor Text color

    Demo

    To try out more features, you can directly run the project demo or scan the QR code to download the Tencent Cloud RT-Cube app demo.

    Running project demo

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

    Tencent Cloud RT-Cube app

    You can try out more features of the superplayer in Tencent Cloud RT-Cube App > Player.

    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