Overview
This document describes how to play an adaptive bitrate streaming video. Specifically, the following will be performed:
Streams of different resolutions will be generated. The lowest will be 480p and the highest will be 1080p.
A screenshot will be taken from the video and will be used as the thumbnail.
Multiple screenshots will be taken at an interval of 20% and will be used as thumbnail previews.
Step 1. Create an Adaptive Bitrate Streaming Template
1. Log in to the VOD console. Select Application Management on the left sidebar. Select the target application and go to Media Processing > Template Settings. Under the Adaptive Bitrate streaming tab, click Create Template. 2. Click Add Stream to add a stream 2 and stream 3 and complete the following settings:
Basic Info:
Template name: Type MyTestTemplate
.
Muxing format: Select "HLS".
Encryption type: Select "Not encrypted".
Switch from Low Resolution to High Resolution: Disable
Streams
|
Stream 1 | 512 Kbps | Long side: 0 px, short side: 480 px. | 24 fps | 48 Kbps | Dual |
Stream 2 | 512 Kbps | Long side: 0 px, short side: 720 px. | 24 fps | 48 Kbps | Dual |
Stream 3 | 1,024 Kbps | Long side: 0 px, short side: 1080 px. | 24 fps | 48 Kbps | Dual |
3. Click Create. An adaptive streaming template that converts a video into three streams is created. The ID of the template is 1430219
.
Step 2. Create an Image Sprite Template
1. Go to Media Processing > Template Settings. Select the Screenshot tab and click Create Screenshot Template.
2. Complete the following settings:
Template name: Type MyTestTemplate
.
Screenshot type: Select "Image sprite screenshot".
Small image dimension: 726 px x 240 px.
Sampling interval: 20%.
Rows: 10.
Columns: 10.
3. Click Create. An image sprite template with the ID 131864 is created.
Step 3. Create and Start a Task Flow
Now you have an adaptive bitrate streaming template (ID 1430219) and an image sprite template (ID 131864). You also need to create a task flow.
1. Go to Media Processing > Task Flow Settings and click Create Task Flow.
Task flow name: Enter MyTestProcedure
.
Configuration item: Select "Adaptive bitrate streaming", "Screenshot", and "Thumbnail generation".
In the Adaptive bitrate streaming task configuration area, click Add Template, and select the MyTestTemplate
template (ID 1430219) created in step 1.
In the Screenshot task configuration area, click Add Template. Select Image sprite for Method for Taking Screenshot and then select the MyTestTemplate
template (ID 131864) created in step 2.
In the Configuration of task of capturing cover screenshot area, click Add Template. For Screenshot Template/ID, select "TimepointScreenshot". For Select by time points, select "Percent", and enter "50".
2. Click Submit. A task flow named MyTestProcedure
will be generated.
3. Go to Media Assets > Video/Audio Management, select the target video (file ID 243xxx814xxxxx416), and click Task Flow.
4. Complete the following settings:
Select Task Flow as the Processing Type.
Select the "MyTestProcedure" task flow template.
5. Click Confirm. Go to Task Center. If the status of the task changes from "Processing" to "Completed", the processing of the video is finished.
6. Return to the Media Assets > Video/Audio Management page, find your video, and click Manage on the right.
6.1 In the Basic Info area:
You can view the thumbnail generated and the outputs of adaptive bitrate streaming (template ID: 1430219).
6.2 Select the Screenshots tab:
You can view the image sprite generated (template ID: 131864).
Step 4. Generate a Player Signature
In this step, you can use the signature tool to quickly generate a signature for the player to play back the video.
Select Distribution and Playback > Player Signature Tools on the left sidebar and complete the following settings: Video file ID: Enter the file ID (243xxx814xxxxx416) in step 3.
Signature expiration time: Enter the player signature expiration time. If you leave it empty, the signature will never expire.
Playable video type: Select Unencrypted adaptive bitrate.
Adaptive bitrate template: Select MyTestTemplate (1430219)
.
Image sprite: Select MyTestTemplate (131864)
.
Click Generate to get the signature string.
Step 5. Play the Video
After step 4, you have obtained the three parameters needed for video playback: appId
, fileId
and psign
(player signature). The following describes how to play the video on the web.
Playback on the web
Select Video playback.
Click the File ID tab.
fileID: Enter the same file ID (243xxx814xxxxx416) in the previous step.
appID: Enter the ID of the VOD application to which the file belongs (which is also the App ID displayed on the signature generation page in the previous step).
psign: Enter the signature string generated in the previous step.
Click Preview to play the video.
Multi-platform player demos
After generating the player signature, you can use our player demos for web, Android, and iOS to play the video. For details, see the source code for the demos. Summary
Was this page helpful?