tencent cloud

フィードバック

Android Integration Guide

最終更新日:2024-10-08 11:34:06

    Overview

    The Tencent Cloud RT-Cube Player for Android is an open-source player component of Tencent Cloud. It integrates quality monitoring, video encryption, Top Speed Codec, definition selection, and small window playback and is suitable for all VOD and live playback scenarios. It encapsulates complete features and provides upper-layer UIs to help you quickly create a playback program comparable to mainstream video applications.
    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. To try out all features of the player, we recommend you activate VOD. If you don't have an account yet, sign up for one first. If you don't use the VOD service, you can skip this step; however, you will only be able to use basic player features after integration.
    2. Download and install Android Studio. If you have already done so, skip this step.

    This Document Describes

    1. How to integrate the Player component for Android
    2. How to create and use the player

    Prerequisites

    Step 1. Download the player code package

    GitHub page: LiteAVSDK/Player_Android
    Download the ZIP file
    Download using Git command
    Go to the Player 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_Android.git
    If you see the following information, the project code has been cloned to your local system successfully.
    Cloning to 'SuperPlayer_Android'...
    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.
    After the project is downloaded, the directory generated after decompression of the source code is as follows:
    Filename
    Description
    LiteAVDemo(Player)
    The Player demo project, which can be run directly after being imported into Android Studio.
    app
    Homepage entry
    superplayerkit
    The Player component (SuperPlayerView), which provides common features such as playback, pause, and gesture control.
    superplayerdemo
    The Player component demo code
    common
    Tool module
    SDK
    Player SDK, including LiteAVSDK_Player_x.x.x.aar (SDK provided in AAR format) and LiteAVSDK_Player_x.x.x.zip (SDKs provided in lib and JAR formats)
    Player Documentation (Android).pdf
    The Player component user guide
    

    Step 2. Integrate the component

    This step describes how to integrate the player. You can integrate the project by using Gradle for automatic loading, manually downloading the AAR and importing it into your current project, or importing the JAR and SO libraries.
    Automatic loading in Gradle (AAR)
    Manual download in Gradle (AAR)
    SDK integration (jar + so)
    1. Download the SDK + demo package for Android here.
    2. Copy the Demo/superplayerkit module to your project and then configure as follows:
    Import superplayerkit into setting.gradle in your project directory.
    include ':superplayerkit'
    Open the build.gradle file of the superplayerkit project and modify the constant values of compileSdkVersion, buildToolsVersion, minSdkVersion, targetSdkVersion, and rootProject.ext.liteavSdk.
    
    
    
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    
    defaultConfig {
    targetSdkVersion 23
    minSdkVersion 19
    }
    
    dependencies {
    // To integrate an older version, change `latest.release` to the corresponding version number, such as `10.8.0.29000`
    implementation 'com.tencent.liteav:LiteAVSDK_Player_Premium:latest.release'
    // If you want to integrate the basic version of the player
    // implementation 'com.tencent.liteav:LiteAVSDK_Player:latest.release'
    }
    Import the common module into your project as instructed above and configure it.
    3. Configure the mavenCentral library in Gradle, and LiteAVSDK will be automatically downloaded and updated. Open app/build.gradle and configure as follows:
    
    
    
    3.1 Add the LiteAVSDK_Player_Premium dependencies to dependencies.
    dependencies {
    implementation 'com.tencent.liteav:LiteAVSDK_Player_Premium:latest.release'
    // If you want to integrate the basic version of the player
    // implementation 'com.tencent.liteav:LiteAVSDK_Player:latest.release'
    implementation project(':superplayerkit')
    }
    If you need to integrate an older version of the LiteAVSDK_Player_Premium SDK, view it in MavenCentral and then integrate it as instructed below:
    dependencies {
    // Integrate the LiteAVSDK_Player_Premium SDK v10.8.0.29000
    implementation 'com.tencent.liteav:LiteAVSDK_Player_Premium:10.8.0.29000'
    // If you want to integrate the basic version of the player
    // implementation 'com.tencent.liteav:LiteAVSDK_Player:latest.release'
    }
    4. In the defaultConfig of app/build.gradle, specify the CPU architecture to be used by the application (currently, LiteAVSDK supports armeabi, armeabi-v7a, and arm64-v8a, which you can configure as needed).
    ndk {
    abiFilters "armeabi", "armeabi-v7a", "arm64-v8a"
    }
    5. Add the mavenCentral library to the build.gradle in your project directory.
    repositories {
    mavenCentral()
    }
    6. Click
    
    Sync Now to sync the SDK. If mavenCentral can be connected to, the SDK will be automatically downloaded and integrated into the project very soon.
    1. Download the SDK + demo package for Android here.
    2. Import SDK/LiteAVSDK_Player_Premium_XXX.aar (XXX is the version number) into the libs folder under app and copy the Demo/superplayerkit module to the project.
    3. Import superplayerkit into setting.gradle in your project directory.
    include ':superplayerkit'
    4. Open the build.gradle file of the superplayerkit project and modify the constant values of compileSdkVersion, buildToolsVersion, minSdkVersion, targetSdkVersion, and rootProject.ext.liteavSdk.
    
    
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    
    defaultConfig {
    targetSdkVersion 23
    minSdkVersion 19
    }
    
    dependencies {
    implementation(name:'LiteAVSDK_Player_Premium_10.8.0.29000', ext:'aar')
    }
    Import the common module into your project as instructed above and configure it.
    Configure repositories
    repositories {
    flatDir {
    dirs '../app/libs'
    }
    }
    5. Add dependencies to app/build.gradle:
    compile(name:'LiteAVSDK_Player_Premium_10.8.0.29000', ext:'aar')
    implementation project(':superplayerkit')
    // Third-party library for integration of the on-screen commenting feature of the Player component
    implementation 'com.github.ctiao:DanmakuFlameMaster:0.5.3'
    6. Add the following to the project's build.gradle:
    allprojects {
    repositories {
    flatDir {
    dirs 'libs'
    }
    }
    }
    7. In defaultConfig of app/build.gradle, specify the CPU architecture to be used by the application (currently, LiteAVSDK supports armeabi, armeabi-v7a, and arm64-v8a).
    ndk {
    abiFilters "armeabi", "armeabi-v7a", "arm64-v8a"
    }
    8. Click Sync Now to sync the SDK.
    If you do not want to import the AAR library, you can also integrate LiteAVSDK by importing JAR and SO libraries.
    1. Download the SDK + demo package for Android here and decompress it. Find SDK/LiteAVSDK_Player_Premium_XXX.zip (XXX is the version number) in the SDK directory. After decompression, you can get the libs directory, which contains the JAR file and folders of SO files as listed below:
    
    
    2. Copy the Demo/superplayerkit module to your project and import superplayerkit into setting.gradle in your project directory.
    include ':superplayerkit'
    3. Copy the libs folder obtained by decompression in step 1 to the superplayerkit project root directory.
    4. Modify the superplayerkit/build.gradle file:
    
    
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    
    defaultConfig {
    targetSdkVersion 23
    minSdkVersion 19
    }
    Import the common module into your project as instructed above and configure it.
    Configure sourceSets and add the SO library import code.
    sourceSets{
    main{
    jniLibs.srcDirs = ['libs']
    }
    }
    Configure repositories, add flatDir, and specify the paths of the local repositories.
    repositories {
    flatDir {
    dirs 'libs'
    }
    }
    5. In defaultConfig of app/build.gradle, specify the CPU architecture to be used by the application (currently, LiteAVSDK supports armeabi, armeabi-v7a, and arm64-v8a).
    ndk {
    abiFilters "armeabi", "armeabi-v7a", "arm64-v8a"
    }
    6. Click Sync Now to sync the SDK.
    At this point, you have completed integrating the RT-Cube Player for Android.

    Step 3. Configure application permissions

    Configure permissions for your application in AndroidManifest.xml. LiteAVSDK needs the following permissions:
    <!--network permission-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!--VOD player floating window permission -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <!--storage-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    Network security configuration allows the app to send HTTP requests
    For security reasons, starting from Android P, Google requires that requests from apps use encrypted connections. The player SDK will start a localsever proxy to make HTTP requests. If your app's targetSdkVersion is greater than or equal to 28, you can enable the permission to send HTTP requests to 127.0.0.1 through network security configuration. Otherwise, an "java.io.IOException: Cleartext HTTP traffic to 127.0.0.1 not permitted" error will occur during playback, causing the video to fail to play. The configuration steps are as follows:
    1. Create a new res/xml/network_security_config.xml file in your project and set the network security configuration.
    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
    <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">127.0.0.1</domain>
    </domain-config>
    </network-security-config>
    2. Add the following attributes to the application tag in the AndroidManifest.xml file:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config"
    ... >
    ...
    </application>
    </manifest>

    Step 4. Set obfuscation rules

    In the proguard-rules.pro file, add the classes related to the TRTC SDK to the "do not obfuscate" list:
    -keep class com.tencent.** { *;}
    At this point, you have completed configuring permissions for the RT-Cube Player application for Android.

    Step 5. 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. FileId or URL can be integrated for playback. Create SuperPlayerView in the layout file:
    <!-- Player component -->
    <com.tencent.liteav.demo.superplayer.SuperPlayerView
    android:id="@+id/superVodPlayerView"
    android:layout_width="match_parent"
    android:layout_height="200dp" />
    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 RT-Cube Player for Android can be used for VOD and live playback as follows:
    VOD playback: The Player component supports two VOD playback methods, namely, through FileId or URL.
    Live playback: The Player component can use the playback through URL method for live playback. A live audio/video stream can be pulled for playback simply by passing in its URL. For more information on how to generate a Tencent Cloud live streaming URL, see Splicing Live Streaming URLs.
    VOD and live playback through URL
    VOD playback through `FileId`
    A URL can be the playback address of a VOD file or the pull address of a live stream. A video file can be played back simply by passing in its URL.
    SuperPlayerModel model = new SuperPlayerModel();
    model.appId = 1400329073; // Configure `AppId`
    model.url = "http://your_video_url.mp4"; // Configure a URL for your video for playback
    mSuperPlayerView.playWithModelNeedLicence(model);
    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" 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.
    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 by using the Adaptive-HLS template (ID: 10) or get the playback URL of the video and play it by URL.
    
    SuperPlayerModel model = new SuperPlayerModel();
    model.appId = 1400329071;// Configure AppId
    model.videoId = new SuperPlayerVideoId();
    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";
    mSuperPlayerView.playWithModelNeedLicence(model);
    
    4. Playback exit If the player is no longer needed, call resetPlayer to reset the player and free up memory.
    mSuperPlayerView.resetPlayer();
    At this point, you have learned how to create a player, use it to play videos, and stop playback.

    More Features

    This section describes several common player features. For more features, see Demo. For features supported by the Player component, see Features.

    1. Full screen playback

    The Player component supports full screen playback. In full screen mode, users can lock the screen, control volume and brightness with gestures, send on-screen comments, take screenshots, and switch the video definition. You can try out this feature in TCToolkit App > Player > Player Component, and you can enter the full screen playback mode by clicking the full screen icon in the bottom-right corner.
    You can call the API below to enter full screen from the windowed playback mode:
    mControllerCallback.onSwitchPlayMode(SuperPlayerDef.PlayerMode.FULLSCREEN);

    Features of full screen playback mode

    Return to the window
    Screen lock
    On-screen comments
    Screenshot
    Change resolution
    Click Back to return to the window playback mode.
    // API triggered after tapping
    mControllerCallback.onBackPressed(SuperPlayerDef.PlayerMode.FULLSCREEN);
    onSwitchPlayMode(SuperPlayerDef.PlayerMode.WINDOW);
    Screen locking disables touch screen and allows users to enter an immersive playback mode.
    // API triggered after tapping
    toggleLockState();
    After the on-screen commenting feature is enabled, text comments sent by users will be displayed on the screen.
    // Step 1. Add an on-screen comment to the on-screen comment view
    addDanmaku(String content, boolean withBorder);
    // Step 2. Enable or disable on-screen commenting
    toggleBarrage();
    The Player component allows users to take and save a screenshot of a video during playback. Click the button in image 4 to capture the screen, and you can save the captured screenshot with the mSuperPlayer.snapshot API.
    mSuperPlayer.snapshot(new TXLivePlayer.ITXSnapshotListener() {
    @Override
    public void onSnapshot(Bitmap bitmap) {
    // The captured screenshot can be saved here
    }
    });
    Users can change the video definition (such as SD, HD, and FHD) during playback.
    // The API for displaying the definition selection view triggered after the button is tapped
    showQualityView();
    // The callback API for tapping the definition option is as follows
    mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    // The event of tapping the definition list view
    VideoQuality quality = mList.get(position);
    mCallback.onQualitySelect(quality);
    }
    });
    // Callback for the selected definition
    @Override
    public void onQualityChange(VideoQuality quality) {
    mFullScreenPlayer.updateVideoQuality(quality);
    mSuperPlayer.switchStream(quality);
    }

    2. Floating window playback

    The Player component supports playback in a small floating window, which allows users to switch to another application without interrupting the video playback. You can try out this feature in TCToolkit App > Player > Player Component by clicking Back in the top-left corner.
    img
    
    Floating window playback relies on the following permission in AndroidManifest:
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    // The API triggered by switching to the floating window
    mSuperPlayerView.switchPlayMode(SuperPlayerDef.PlayerMode.FLOAT);
    // The API triggered by tapping the floating window to return to the main window
    mControllerCallback.onSwitchPlayMode(SuperPlayerDef.PlayerMode.WINDOW);

    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. You can try out this feature 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 = new SuperPlayerModel();
    model.appId = "Your `appid`";
    model.videoId = new SuperPlayerVideoId();
    model.videoId.fileId = "Your `fileId`";
    // Playback mode, which can be set to automatic (`PLAY_ACTION_AUTO_PLAY`) or manual (`PLAY_ACTION_MANUAL_PLAY`)
    model.playAction = 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.coverPictureUrl = "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/cc1e28208602268011087336518/MXUW1a5I9TsA.png"
    mSuperPlayerView.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.
    This feature can be tried out in TCToolkit App > Player > Player Component > Video List Loop Demo.
    // Step 1. Create a loop list<SuperPlayerModel>
    ArrayList<SuperPlayerModel> list = new ArrayList<>();
    SuperPlayerModel model = new VideoModel();
    model = new SuperPlayerModel();
    model.videoId = new SuperPlayerVideoId();
    model.appid = 1252463788;
    model.videoId.fileId = "4564972819219071568";
    list.add(model);
    
    model = new SuperPlayerModel();
    model.videoId = new SuperPlayerVideoId();
    model.appid = 1252463788;
    model.videoId.fileId = "4564972819219071679";
    list.add(model);
    // Step 2. Call the loop API
    mSuperPlayerView.playWithModelListNeedLicence(list, true, 0);
    public void playWithModelListNeedLicence(List<SuperPlayerModel> models, boolean isLoopPlayList, int index);
    API parameters:
    Parameter
    Type
    Description
    models
    List<SuperPlayerModel>
    Loop data list
    isLoopPlayList
    boolean
    Whether to loop video playback
    index
    int
    Index of SuperPlayerModel from which to start the playback

    5. Picture-in-picture

    Starting from Android 8.0 (API level 26), Android allows launching activities in picture-in-picture (PiP) mode.
    
    
    
    If you need to enable or disable picture-in-picture, simply change the value of enablePIP in SuperPlayerGlobalConfig. To add picture-in-picture to your app, you need to add the following attribute to the activity that supports picture-in-picture in AndroidManifest.
    <activity>
    android:name=".demo.SuperPlayerActivity"
    android:resizeableActivity="true"
    android:supportsPictureInPicture="true"
    android:documentLaunchMode="intoExisting"
    android:excludeFromRecents="true"
    android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize|screenLayout">
    </activity>
    At the same time, the lifecycle of the activity that supports picture-in-picture needs to be handled specially according to SuperPlayerActivity. To enable picture-in-picture, use PictureInPictureHelper in SuperPlayerView.
    PictureInPictureHelper mPictureInPictureHelper = new PictureInPictureHelper(mContext);
    mPictureInPictureHelper.setListener(this);
    mPictureInPictureHelper.enterPictureInPictureMode(getPlayerState(),mTXCloudVideoView);
    You need to release it in SuperPlayerView when exiting.
    mPictureInPictureHelper.release();
    If you need to modify the time interval for moving the custom button forward or backward in picture-in-picture, simply modify the value of PIP_TIME_SHIFT_INTERVAL in PictureInPictureHelper.

    6. Preview

    The Player component supports the video preview feature, which allows non-member viewers to view a preview of the video. You can pass in different parameters to control the video preview duration, prompt message, and preview end screen. You can try out this feature in Tencent Cloud Toolkit App > Player > Player Component > Preview Feature Demo.
    Method 1:
    // Step 1. Create a video model
    SuperPlayerModel mode = new SuperPlayerModel();
    //... Add the video source information
    // Step 2. Create a preview information model
    VipWatchModel vipWatchModel = new VipWatchModel("You can preview %ss and activate the VIP membership to watch the full video",15);
    mode.vipWatchMode = vipWatchModel;
    // Step 3. Call the method for playing back videos
    mSuperPlayerView.playWithModelNeedLicence(mode);
    
    Method 2:
    // Step 1. Create a preview information model
    VipWatchModel vipWatchModel = new VipWatchModel("You can preview %ss and activate the VIP membership to watch the full video",15);
    // Step 2. Call the method for setting the preview feature
    mSuperPlayerView.setVipWatchModel(vipWatchModel);
    public VipWatchModel(String tipStr, long canWatchTime)
    VipWatchModel API parameter description:
    Parameter
    Type
    Description
    tipStr
    String
    Preview prompt message
    canWatchTime
    Long
    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.
    Method 1:
    // Step 1. Create a video model
    SuperPlayerModel mode = new SuperPlayerModel();
    //... Add the video source information
    // Step 2. Create a watermark information model
    DynamicWaterConfig dynamicWaterConfig = new DynamicWaterConfig("shipinyun", 30, Color.parseColor("#80FFFFFF"));
    mode.dynamicWaterConfig = dynamicWaterConfig;
    // Step 3. Call the method for playing back videos
    mSuperPlayerView.playWithModelNeedLicence(mode);
    
    Method 2:
    // Step 1. Create a watermark information model
    DynamicWaterConfig dynamicWaterConfig = new DynamicWaterConfig("shipinyun", 30, Color.parseColor("#80FFFFFF"));
    // Step 2. Call the method for setting the dynamic watermark feature
    mSuperPlayerView.setDynamicWatermarkConfig(dynamicWaterConfig);
    public DynamicWaterConfig(String dynamicWatermarkTip, int tipTextSize, int tipTextColor)
    API parameters:
    Parameter
    Type
    Description
    dynamicWatermarkTip
    String
    Watermark text information
    tipTextSize
    int
    Text size
    tipTextColor
    int
    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.
    
    
    DownloadMenuListView (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 download data with the following parameters
    DownloadMenuListView mDownloadMenuView = findViewById(R.id.superplayer_cml_cache_menu);
    mDownloadMenuView.initDownloadData(superPlayerModelList, mVideoQualityList, mDefaultVideoQuality, "default");
    
    // Step 2. Set the options of the video being played back
    mDownloadMenuView.setCurrentPlayVideo(mSuperplayerModel);
    
    // Step 3. Set the click event of the **video download list** button
    mDownloadMenuView.setOnCacheListClick(new OnClickListener() {
    @Override
    public void onClick(View v) {
    // Redirect to the Activity where `VideoDownloadListView` is located
    startActivity(DownloadMeduListActivity.this,VideoDownloadListActivity.class);
    }
    });
    
    // Step 4. Display the view with animation
    mDownloadMenuView.show();
    public void initDownloadData(List<SuperPlayerModel> superPlayerModelList,
    List<VideoQuality> qualityList,
    VideoQuality currentQuality,
    String userName)
    API parameters:
    Parameter
    Type
    Description
    superPlayerModelList
    List<SuperPlayerModel>
    The downloaded video data
    qualityList
    List<VideoQuality>
    The video definition data
    currentQuality
    VideoQuality
    The current video definition
    userName
    String
    The username
    VideoDownloadListView (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.
    
    
    
    // Step 1. Bind the control
    VideoDownloadListView mVideoDownloadListView = findViewById(R.id.video_download_list_view);
    
    //Step 2. Add data
    mVideoDownloadListView.addCacheVideo(mDataList, true);
    
    API parameters:
    public void addCacheVideo(List<TXVodDownloadMediaInfo> mediaInfoList, boolean isNeedClean);
    Parameter
    Type
    Description
    mediaInfoList
    List<TXVodDownloadMediaInfo>
    The type of the added video data
    isNeedClean
    boolean
    Whether to clear the previous data

    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 `PlayWithField`, with the `url` variable of `superplayerModel` being empty and `videoId` not being empty).
    mSuperplayerView.play(superplayerModel);
    
    // Step 2. Get timestamp and image sprite information in the `VOD_PLAY_EVT_GET_PLAYINFO_SUCC` callback event during playback through `PlayWithFileId`.
    public void onPlayEvent(TXVodPlayer player, int event, Bundle param) {
    switch (event) {
    case TXVodConstants.VOD_PLAY_EVT_GET_PLAYINFO_SUCC:
    
    // Get the list of image URLs of the image sprite
    playImageSpriteInfo.imageUrls = param.getStringArrayList(TXVodConstants.EVT_IMAGESPRIT_IMAGEURL_LIST);
    // Get the download URL of the image sprite WebVTT file
    playImageSpriteInfo.webVttUrl = param.getString(TXVodConstants.EVT_IMAGESPRIT_WEBVTTURL);
    // Get the timestamp information
    ArrayList<String> keyFrameContentList =
    param.getStringArrayList(TXVodConstants.EVT_KEY_FRAME_CONTENT_LIST);
    // Get the time information of the timestamp information
    float[] keyFrameTimeArray = param.getFloatArray(TXVodConstants.EVT_KEY_FRAME_TIME_LIST);
    
    // Construct the list of timestamp information
    if (keyFrameContentList != null && keyFrameTimeArray != null
    && keyFrameContentList.size() == keyFrameTimeArray.length) {
    for (int i = 0; i < keyFrameContentList.size(); i++) {
    PlayKeyFrameDescInfo frameDescInfo = new PlayKeyFrameDescInfo();
    frameDescInfo.content = keyFrameContentList.get(i);
    frameDescInfo.time = keyFrameTimeArray[i];
    mKeyFrameDescInfoList.add(frameDescInfo);
    }
    }
    break;
    default:
    break;
      }
    }
    
    // Step 3. Assign the obtained timestamp information and image sprite to the corresponding view through the `updateVideoImageSpriteAndKeyFrame` method.
    // The view of the image sprite corresponds to `mIvThumbnail` in the `VideoProgressLayout` component.
    // The view of the timestamp information corresponds to `TCPointView` in the `PointSeekBar` component.
    updateVideoImageSpriteAndKeyFrame(playImageSpriteInfo,keyFrameDescInfoList);

    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#subtitleSourceModelList.
    // Pass in subtitle url, subtitle name, and subtitle type
    SubtitleSourceModel subtitleSourceModel = new SubtitleSourceModel();
    subtitleSourceModel.name = "ex-cn-srt";
    subtitleSourceModel.url = "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-CN.srt";
    subtitleSourceModel.mimeType = TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_SRT;
    model.subtitleSourceModelList.add(subtitleSourceModel);
    
    
    // Play
    mSuperPlayerView.playWithModelNeedLicence(model);
    Step 2: Switch subtitles after playback.
    // After the video starts playing, select the added external subtitles.
    public void onClickSubTitleItem(TXTrackInfo clickInfo) {
    List<TXTrackInfo> subtitleTrackInfoList = mVodPlayer.getSubtitleTrackInfo();
    for (TXTrackInfo trackInfo : subtitleTrackInfoList) {
    if (trackInfo.trackIndex == clickInfo.trackIndex) {
    // Select the subtitle
    mVodPlayer.selectTrack(trackInfo.trackIndex);
    mSelectedSubtitleTrackInfo = trackInfo;
    } else {
    // Deselect other subtitles if they are not needed.
    mVodPlayer.deselectTrack(trackInfo.trackIndex);
    }
    }
    }
    Step 3: Configure subtitle styles.
    Subtitle styles can be configured before or during playback.
    TXSubtitleRenderModel model = new TXSubtitleRenderModel();
    model.canvasWidth = 1920; // Subtitle render canvas width
    model.canvasHeight = 1080; // Subtitle render canvas height
    model.fontColor = 0xFFFFFFFF; // Set the subtitle font color, default white and opaque
    model.isBondFontStyle = false; // Set whether the subtitle font is bold
    mVodPlayer.setSubtitleStyle(model);
    

    111. Ghost watermark

    The content of the ghost watermark is filled in the player signature, and is finally displayed on the player through the cloud on-demand backend. The entire transmission link process is coordinated by the cloud and the player to ensure the security of the watermark. Tutorial on configuring ghost watermark in player signature. The ghost watermark only appears on the video for a short period of time, and this flash has little impact on the viewing of the video. The position of the watermark on the screen is not fixed each time, preventing others from trying to block the watermark. The effect is as shown in the picture below. When the video starts playing, the watermark will appear once and then disappear. Wait until the next time it appears before disappearing.
    The content of the ghost watermark is obtained through param.getString(TXVodConstants.EVT_KEY_WATER_MARK_TEXT) after receiving the TXVodConstants#VOD_PLAY_EVT_GET_PLAYINFO_SUCC event from the player.
    Note: Supported from player version 11.6.
    
    
    
    // Step 1: Configure FileId that supports ghost watermark to play video
    SuperPlayerModel model = new SuperPlayerModel(); model.appId = 1500006438; model.videoId.fileId = "387702307847129127"; model.videoId.pSign = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDA" + "wNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY29udG" + "VudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsIn" + "Jhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1w" + "IjoxNjg2ODgzMzYwLCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6I" + "mdob3N0IGlzIHdhdGNoaW5nIn19.0G2o4P5xVZ7zF" + "lFUgBLntfX03iGxK9ntD_AONClUUno"; mSuperPlayerView.playWithModelNeedLicence(model);
    
    // Step 2: After receiving the ghost watermark content callback in SuperPlayerView#onRcvWaterMark, display the ghost watermark
    public void onRcvWaterMark(String text, long duration) { if (!TextUtils.isEmpty(text)) { DynamicWaterConfig dynamicWaterConfig = new DynamicWaterConfig(text, 30, Color.parseColor("#30FFFFFF")); dynamicWaterConfig.durationInSecond = duration; dynamicWaterConfig.setShowType(DynamicWaterConfig.GHOST_RUNNING); setDynamicWatermarkConfig(dynamicWaterConfig); } }

    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. Select File > Open on the navigation bar of Android Studio. In the pop-up window, select the $SuperPlayer_Android/Demo directory of the demo project. After the demo project is imported successfully, click Run app to run the demo.
    2. After running the demo successfully, go to Player > Player Component to try out the player features.
    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)