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
Log in to the VOD Console, select Video Processing Settings > Template Settings, and click Create Template on the Adaptive Bitrate Streaming Template tab.
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
- Muxing Format: HLS
- Encryption Type: select Not encrypted.
- Allow Transcoding from Low Resolution to High Resolution: disable this option.
- Substream information module
||Image long side: empty; video short side: 480 px
||Image long side: empty; video short side: 720 px
||Image long side: empty; video short side: 1,080 px
Click Create, an adaptive bitrate streaming template containing three substreams will be generated, and the template ID will be
Step 2. Create an image sprite template
- Log in to the VOD Console, select Video Processing Settings > Template Settings, and click Create Template on the Screencapturing Template tab.
- On the "Template Settings" page, enter the template parameters:
- Template Name:
- Template Type: Image Sprite Screencapturing.
- Image Dimension: 726x240.
- Sampling Interval: 20%.
- Rows: 10.
- Columns: 10.
- Click Create, and 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.
- Log in to the VOD Console, select Video Processing Settings > Task Flow Settings, and click Create Task Flow: Task Flow Name: enter
- 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(1145464) 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(113272) 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".
- Click Submit, and a task flow named
MyTestProcedure will be generated.
- Select Media Assets > Video Management in the console, select the target video (FileId: 528xxx3757278095), and click Process Video.
- In the video processing pop-up window:
- Select Task Flow as Processing Type.
- Select MyTestProcedure as Task Flow Template.
- Click OK and wait until the video status changes from "Processing" to "Normal", which indicates that video processing is completed.
- 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: 1145464).
- In the Screenshot Info column, 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.
- Log in to the VOD Console, select Distribution and Playback Settings > Superplayer Configuration, and click Create.
- 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:
- On the Adaptive Bitstream for Playback tab, select
MyTestTemplate(1145464) as "Adaptive Bitrate Streaming Template/ID".
- On the Image Sprite for Playback tab, select
MyTestTemplate as "Screencapturing Template".
- Click OK to generate the superplayer configuration
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.
- 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.
- Select "MyTestCfg" as Playback Configuration.
- 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).
- 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.
- 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
- Video fileId: video
FileId, which is
- Current Unix Timestamp: current Unix time automatically generated by the tool, which does not need to be entered manually and is
- Superplayer Configuration: custom superplayer configuration name, which is
- 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:
- Hotlink Protection Key: previously obtained hotlink protection key, which is
- 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.
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.
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.