Stage 3. Customize playback content and style

Last updated: 2020-09-24 10:27:34

    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 cover.
    • Adjust the preview thumbnail interval on the progress bar to 20%.

    Before reading this document, please 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 Settings > Template Settings, and click Create Template on the Adaptive Bitrate Streaming Template tab.

    2. Enter 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.
        • Encryption Type: select Not encrypted.
        • Allow Transcoding 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: 0 px; video short side: 480 px 24 fps 48 Kbps Dual
        Substream 2 512 Kbps Video long side: 0 px; video short side: 720 px 24 fps 48 Kbps Dual
        Substream 3 1,024 Kbps Video long side: 0 px; video short side: 1,080 px 24 fps 48 Kbps Dual
    3. Click Create, an adaptive bitrate streaming template containing three substreams will be generated, and the template ID will be 125866.

    Step 2. Create an image sprite template

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

    Step 3. Create a task flow and initiate processing

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

    1. Log in to the VOD Console, select Video Processing Settings > Task Flow Settings, and click Create Task Flow:
      • Task Flow Name: enter MyTestProcedure.
      • Task Type: check Adaptive bitrate streaming, Screencapturing, and Cover capturing:
        • On the Adaptive bitrate streaming task configuration tab, click Add Template, and select the custom adaptive bitrate streaming template MyTestTemplate(126866) created in step 1 as "Adaptive Bitrate Streaming Template/ID".
        • On the Screencapturing task configuration tab, click Add Template, and select Image Sprite as "Screencapturing Method" and the custom image sprite template MyTestTemplate(41377) created in step 2 as "Screencapturing Template".
        • On the Cover capturing task configuration tab, click Add Template, select TimepointScreenshot as "Screencapturing Template", and select Percentage and enter "50%" for "Time Point Selection".
    2. Click Submit, and a task flow named MyTestProcedure will be generated.
    3. Select Media Assets > Video Management in the console, select the target video (FileId: 528xxx3757278095), and click Process Video.
    4. In the video processing pop-up window:
      • Select Task Flow as Processing Type.
      • Select MyTestProcedure as Task Flow Template.
    5. Click OK and wait until the video status changes from "Processing" to "Normal", which indicates that video processing is completed.
    6. Click Manage in the "Operation" column of the video to enter the management page:
      • In the Basic Info column, you can view the generated cover and output adaptive bitstream (template ID: 125866).
      • In the Screenshot Info column, you can view the generated image sprite (template ID: 41377).

    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 Distribution and Playback Settings > Superplayer Configuration, and click Create.
    2. On the superplayer configuration page, click Add Adaptive Bitrate Streaming Template and Add Image Sprite Template, and enter the following parameters for the two templates, respectively:
      • Template Name: MyTestCfg.
      • On the Adaptive Bitstream for Playback tab, select MyTestTemplate(125866) as "Adaptive Bitrate Streaming Template/ID".
      • On the Image Sprite for Playback tab, select MyTestTemplate(41377) as "Screencapturing Template".
    3. Click OK 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" as 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 1 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, and you can play back the video on web.

    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 1 day by default.
      • Link Expiration Time: expiration time of key hotlink protection, which can be set to the hexadecimal Unix time after 6 hours: 5ee09b44.
      • Hotlink Protection Key: previously obtained hotlink protection key, which is 2WExxx48eW.
    2. 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, please 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, please see Stage 4. Play back an encrypted video.

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help