tencent cloud

Feedback

Stage 3. Customize playback content and style

Last updated: 2022-05-31 11:18:25

    Overview

    This document describes how to customize the content and style of a video played back by the superplayer, including:

    • Set the resolution of a substream to be played back, which ranges from 480p to 1080p.
    • Use a video screenshot as the video thumbnail.
    • Adjust the preview thumbnail interval on the progress bar to 20%.

    Before reading this document, make sure that you have read Stage 1. Play back a video with superplayer and Stage 2. Play back a video with hotlink protection enabled in the Superplayer Guide. This document uses the account activated and the video uploaded in stage 1, and hotlink protection needs to be enabled as instructed in stage 2.

    Step 1. Create an adaptive bitrate streaming template

    1. Log in to the VOD console, select Video Processing > Template Settings, and click Create Template on the Adaptive Bitrate Streaming tab.
    2. On the Template Settings page, click Add Substream to create substreams 1, 2, and 3, and enter the parameters as follows:
      • Basic information module
        • Template Name: Enter MyTestTemplate.
        • Muxing Format: Select HLS.
        • Encryption Type: Select Not encrypted.
        • Switch from Low Resolution to High Resolution: Disable this option.
    • Substream information module
      Substream ID Video Bitrate Resolution Frame Rate Audio Bitrate Sound Channel
      Substream 1 512 Kbps Video long side: Empty; video short side: 480 px 24 fps 48 Kbps Dual Channel
      Substream 2 512 Kbps Video long side: Empty; video short side: 720 px 24 fps 48 Kbps Dual Channel
      Substream 3 1024 Kbps Video long side: Empty; video short side: 1,080 px 24 fps 48 Kbps Dual
    1. Click Create. An adaptive bitrate streaming template containing three substreams will be generated, and the template ID will be 1145464.

    Step 2. Create an image sprite template

    1. Log in to the VOD console, select Video Processing > Template Settings, and click Create Screenshot Template on the Screenshot tab.
    2. On the Template Settings page, enter the template parameters:
    • Template Name: MyTestTemplate.
    • Screenshot Type: Image sprite screenshot.
    • Image Dimension: 726x240.
    • Sampling Interval: 20%.
    • Rows: 10.
    • Columns: 10.
    1. Click Create. An image sprite template whose ID is 113272 will be generated.

    Step 3. Create a task flow and initiate processing

    After creating an adaptive bitrate streaming template (ID: 1145464) and an image sprite template (ID: 113272), you need to create a task flow.

    1. Log in to the VOD console, select Video Processing > Task Flow Settings, and click Create Task Flow:
    • Task Flow Name: Enter MyTestProcedure.
    • Configuration Item: Select Adaptive bitrate streaming, Screenshot task, and Capture cover task. In the Adaptive bitrate streaming task configuration area, click Add Template, and select the custom adaptive bitrate streaming template MyTestTemplate(1145464) created in step 1 for Adaptive Bitrate Streaming Template/ID.
      • In the Screenshot task configuration area, click Add Template, and select Image sprite for Method for Taking Screenshot and the custom image sprite template MyTestTemplate(113272) created in step 2 for Screenshot/ID.
      • In the Configuration of task of capturing cover screenshot area, click Add Template, select TimepointScreenshot for Screenshot Template/ID, and select Percent and enter "50%" for Select by time points.
    1. Click Submit. A task flow named MyTestProcedure will be generated.
    2. Select Media Assets > Video Management in the console, select the target video (FileId: 528xxx3757278095), and click Process Video.
    3. In the video processing pop-up window:
    • Select Task Flow for Processing Type.
    • Select MyTestProcedure for Task Flow Template.
    1. Click Confirm and wait until the Video Status changes from "Processing" to "Normal", which indicates that video processing is completed.
    2. Click Manage in the Operation column of the video to enter the management page:
    • In the Basic Info tab, you can view the generated thumbnail and output adaptive bitstream (template ID: 1145464).
    • In the Screenshot Info tab, you can view the generated image sprite (template ID: 113272).

    Step 4. Create a superplayer configuration

    To play back the custom adaptive bitstream and image sprite, you need to use a custom player configuration.

    1. Log in to the VOD console, select Superplayer Configuration, and click Create.
    2. On the superplayer configuration page, add an adaptive bitrate streaming template and an image sprite template:
    • Configuration Name: MyTestCfg.
    • Select MyTestTemplate(1145464) for Adaptive Bitrate Streaming Template/ID.
    • Select MyTestTemplate for Screenshot Template.
    1. Click Confirm to generate the superplayer configuration MyTestCfg.

    Step 5. Preview video playback

    In the previous step, you have processed the video. Now, you can use the superplayer for web, iOS, and Android to quickly preview video playback.

    1. Select the Uploaded tab in Video Management, find the video uploaded and processed in previous steps, click Manage in the Operation column, and select the Superplayer Preview tab.
    2. Select MyTestCfg for Playback Configuration.
    3. As hotlink protection is enabled for the default distribution domain name, you can set the hotlink protection expiration time and the preview duration on the Playback Control tab. You can use the default parameter settings here (the default expiration time of playback hotlink protection is one day, and the preview duration and maximum number of IPs allowed for playback are left empty).
    4. In Web Player, click the button in the middle of the player to play back the video on web.
    5. In Mobile Player, click Scan code to download and install "Tencent Cloud Toolkit".
    6. Open Tencent Cloud Toolkit on your mobile phone, select Player > Superplayer, click the top-right corner to scan the QR code, and you can play back the video on your phone.

    Step 6. Use a demo for verification

    After hotlink protection is enabled, the superplayer requires a signature within its validity period to play back the video. You can use the signature tool to quickly generate a signature as shown below.

    1. Enter the Superplayer - Signature Generation Tool page and enter the following parameters:
    • User appId: appId of video 1400xxx357(if a subapplication is used, enter the subapplication's appId).
    • Video fileId: Video FileId, which is 528xxx3757278095.
    • Current Unix Timestamp: Current Unix time automatically generated by the tool, which does not need to be entered manually and is 1591756516 here.
    • Superplayer Configuration: Custom superplayer configuration name, which is MyTestCfg here.
    • Signature Expiration Unix Timestamp: Signature expiration time, which can be left empty. The signature will expire in one day by default.
    • Link Expiration Time: Expiration time of key hotlink protection, which can be set to the hexadecimal Unix time after six hours: 5ee09b44.
    • Hotlink Protection Key: Previously obtained hotlink protection key, which is 2WExxx48eW.
    1. Click Generate Signature, and the generated signature will be displayed in the "Signature Generation Result" text box.

    After getting the superplayer signature, you can use the superplayer demos for web, Android, and iOS for verification. For more information, see the demo source code.

    Note:

    In Media Assets > Video Management > Superplayer Preview in the console, you can get the corresponding web player source code for video preview for your reference.

    Summary

    At this point, you have understood how to customize the content and style of a video played back by the superplayer.
    If you want to encrypt a video and play back the encrypted video, see Stage 4. Play back an encrypted video.

    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