This document describes how to use the player to play back long videos common on audio/video platforms. It covers the web, iOS, and Android versions of the player and also details the features of automatic adaptive bitstream switch, video thumbnail preview, and video timestamping.
Overview
After reading this document, you will know:
- How to output adaptive bitstreams in VOD (a player can dynamically select the most appropriate bitrate for playback based on the current bandwidth).
- How to set video timestamps.
- How to use image sprite as thumbnail in VOD.
- How to use the player.
Before reading this document, make sure that you have read Stage 1. Play back a video with Player in the Player Guide and understand the concept of fileid
in VOD.
Directions
Step 1. Output adaptive bitstream and image sprite
This step describes how to transcode a video to adaptive bitstream and output image sprite.
- Log in to the VOD console, select Video Processing > Template Settings > Adaptive Bitrate Streaming, and click Create Template.
Create the adaptive bitstream through the template as needed. This document describes how to create an adaptive bitrate streaming template named testAdaptive
, which contains three substreams with a resolution of 480p, 720p, and 1080p respectively. The video bitrate, video frame rate, and audio bitrate remain the same as the original video.
- Select Video Processing > Template Settings > Screenshot and click Create Template.
Create the image sprite through the template as needed. This document describes how to create an image sprite template named testSprite
, with a sampling interval of 5%, 10 rows, and 10 columns.
- Add the adaptive bitrate streaming and image sprite templates through the task flow.
Select Video Processing > Task Flow Settings and click Create Task Flow.
Add a task through the task flow as needed. To demonstrate the process of playing back an adaptive bitstream, this document describes how to create a task flow named testPlayVideo
, which only adds the adaptive bitrate streaming and image sprite templates.
- Select Media Assets > Audio/Video Management, select the target video, click Process Video > Task Flow, and select a task flow template to start the task.
- At this point, you can get the processed task result in Audio/Video Management > Operation > Manage.
Step 2. Add video timestamps
This step describes how to add a set of video timestamps.
- Go to VOD Server APIs > Media Asset Management APIs > ModifyMediaInfo and click Debug to enter the TencentCloud API console for debugging.
- Add the specified video timestamps through the AddKeyFrameDescs.N parameter.
At this point, you have completed the operation in the cloud, output the adaptive bitstreams and image sprite, and added the video timestamps.
Step 3. Integrate the player
This step describes how to play back the adaptive bitstreams, thumbnails, and timestamps in the player for web, iOS, and Android.
You need to integrate the RT-Cube Player as instructed in Integration Guide. After importing the player's SDK file, you can get the appId
and fileId
of media asset files from Media Assets for playback.
The construction method of the player is TCPlayer
, which can be used to create a player instance for playback.
1. Place the player container in the HTML file
Place the player container in the desired place on the page. For example, add the following code to index.html
(the container ID, width, and height can be customized).
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
2. Play back with the fileID
Add the following initialization script to the index.html
page initialization code to pass in the obtained fileID
and appID
for playback.
var player = TCPlayer('player-container-id', {
fileID: '5285890799710670616',
appID: '1400329073'
});
You need to integrate the RT-Cube Player as instructed in Integration Guide. After integration, you can get the appId
and fileId
of media asset files from Media Assets for playback.
The main class of the player is SuperPlayerView
, and videos can be played back after it is created.
// Import the header file
#import <SuperPlayer/SuperPlayer.h>
// Create a player
_playerView = [[SuperPlayerView alloc] init];
// Set a delegate for events
_playerView.delegate = self;
// Set the parent view. _playerView will be automatically added under holderView.
_playerView.fatherView = self.holderView;
Playing back with the fileId
SuperPlayerModel *model = [[SuperPlayerModel alloc] init];
model.appId = 1400329073;
model.videoId = [[SuperPlayerVideoId alloc] init];
model.videoId.fileId = @"5285890799710670616";
[_playerView playWithModel:model];
You need to integrate the RT-Cube Player as instructed in Integration Guide. After integration, you can get the appId
and fileId
of media asset files from Media Assets for playback.
The main class of the player is SuperPlayerView
, and videos can be played back after it is created.
1. Create the SuperPlayerView in the layout file
<com.tencent.liteav.demo.superplayer.SuperPlayerView
android:id="@+id/superVodPlayerView"
android:layout_width="match_parent"
android:layout_height="200dp" />
2. Play back with the fileId
mSuperPlayerView = (SuperPlayerView) findViewById(R.id.superVodPlayerView);
SuperPlayerModel model = new SuperPlayerModel();
model.appId = 1400329073;
model.videoId = new SuperPlayerVideoId();
model.videoId.fileId = "5285890799710670616";
mSuperPlayerView.playWithModel(model);
Summary
At this point, you can view the image sprite and video timestamps and automatically switch dynamic adaptive bitstreams in the player. For more features, see Feature Description.
Was this page helpful?