Video on Demand
Video on Demand Player SDK Documentation
Product Documentation
©2013-2019 Tencent Cloud. All rights reserved. Page 1 of 32 Video on Demand
Copyright Notice
©2013-2019 Tencent Cloud. All rights reserved.
Copyright in this document is exclusively owned by Tencent Cloud. You must not reproduce, modify, copy or distribute in any way, in whole or in part, the contents of this document without Tencent Cloud's the prior written consent.
Trademark Notice
All trademarks associated with Tencent Cloud and its services are owned by Tencent Cloud Computing (Beijing) Company Limited and its affiliated companies. Trademarks of third parties referred to in this document are owned by their respective proprietors.
Service Statement
This document is intended to provide users with general information about Tencent Cloud's products and services only and does not form part of Tencent Cloud's terms and conditions. Tencent Cloud's products or services are subject to change. Specific products and services and the standards applicable to them are exclusively provided for in Tencent Cloud's applicable terms and conditions.
©2013-2019 Tencent Cloud. All rights reserved. Page 2 of 32 Video on Demand
Contents
Player SDK Documentation Playback SDK Overview Integration on iOS Superplayer for iOS Integration on Web Superplayer TCPlayer User Guide Development Documentation
©2013-2019 Tencent Cloud. All rights reserved. Page 3 of 32 Video on Demand
Player SDK Documentation Playback SDK Overview
Last updated:2021-08-23 17:53:03
VOD provides the basic player and superplayer for different scenarios.
In short video playback scenarios (such as short videos on UGSV social media, ecommerce platforms, and WeChat Official Account), you can integrate the basic player SDK as instructed here. In long video playback and encrypted video playback scenarios (such as video social media, online education websites, and online TV platforms), you can integrate the superplayer SDK as instructed below:
Feature Overview
The superplayer SDK has a wide variety of playback features, including:
The brightness, volume level, and progress can be adjusted through gestures. Different resolutions can be switched between manually, and the resolution can also be adaptive to the network bandwidth. Different playback speeds can be specified, and mirroring and hardware acceleration can be enabled. Timestamp information can be added to the progress bar, and corresponding thumbnails can be displayed for preview.
For all features, please see VOD Superplayer - Feature List.
Integration Method
Player Type SDK Download Address User Guide
Android Android Superplayer iOS iOS Web Web
©2013-2019 Tencent Cloud. All rights reserved. Page 4 of 32 Video on Demand
Integration Guide
To help you quickly integrate the superplayer of VOD, we provide a superplayer integration guide to describe the integration steps by way of demos.
©2013-2019 Tencent Cloud. All rights reserved. Page 5 of 32 Video on Demand
Integration on iOS Superplayer for iOS
Last updated:2020-04-02 16:43:50
Overview
The superplayer SDK for iOS is a player component used to play back videos in VOD. It can implement powerful playback functionality similar to Tencent Video with just a few lines of code.
Basic features: landscape/portrait mode switch, definition selection, gestures, small window playback, etc. Advanced features: video buffering, software/hardware decoding switch, adjustable-speed playback, video thumbnails, DRM-encrypted playback, etc.
The superplayer SDK supports more formats and has better compatibility and functionality than system-default players. In addition, it features instant playback on splash screen and low latency.
SDK Download
The VOD superplayer SDK for iOS can be downloaded here.
Quick Integration
CocoaPods integration
Add the following code to your Podfile:
pod 'SuperPlayer'
Enter pod install or pod update on the command line to perform the installation.
Preparing videos
Log in to the VOD Console, click Media Assets on the left sidebar, and you will see the uploaded video and its corresponding ID (i.e., FileId ) in the video list in the Uploaded column. If you don't
©2013-2019 Tencent Cloud. All rights reserved. Page 6 of 32 Video on Demand
have a video, please click Upload Video to upload one.
You can initiate an adaptive bitrate streaming task for the uploaded video through ProcessMedia: You are recommended to enter 10 for MediaProcessTask.AdaptiveDynamicStreamingTaskSet.Definition in the API parameter, indicating transcoding to adaptive bitstream in HLS format.
Starting playback
The main class of the player is SuperPlayerView , and videos can be played back after it is created.
// Import the header file #import
In the code, appId is your AppId, fileId is the ID of the video you want to play back, playDefinition is the ID of the playback template used for playback, and version is fixed to SuperPlayerVideoId.FILE_ID_V3 .
Run the code and you can see that the video is played back on the phone and most of the features in the UI are available.
©2013-2019 Tencent Cloud. All rights reserved. Page 7 of 32 Video on Demand
Thumbnails and Timestamps
When videos are played back, the "thumbnails" and "timestamps" on the progress bar can help viewers find the points of interest easily. Thumbnails are implemented through image sprites, while timestamps by modifying timestamp information in media assets.
After image sprites are generated and timestamps are added, new elements will be displayed in the player UI.
Small Window Playback
A small window is a player that floats over the main window within the application. Small window playback is very simple. You just need to call the following code in the appropriate position:
[SuperPlayerWindow sharedInstance].superPlayer = _playerView; // Set the player for small window playback [SuperPlayerWindow sharedInstance].backController = self; // Set the returned view controller [[SuperPlayerWindow sharedInstance] show]; // Floating display
Exiting Playback
If the player is no longer needed, please call resetPlayer to clear the internal state of the player and free up the memory.
[_playerView resetPlayer];
More Features
To try out the complete features, scan the QR code below to download the Tencent Video Cloud toolkit or run the project demo directly.
©2013-2019 Tencent Cloud. All rights reserved. Page 8 of 32 Video on Demand
©2013-2019 Tencent Cloud. All rights reserved. Page 9 of 32 Video on Demand
Integration on Web Superplayer TCPlayer User Guide
Last updated:2021-08-26 17:20:37
This document describes the web superplayer of VOD, which can be quickly integrated with your own web applications through flexible APIs to implement video playback. This document is intended for developers who have a basic knowledge of JavaScript.
Overview of Capabilities
The VOD superplayer implements video playback through the HTML5
Supported video formats and platforms
Browser/Format MP4 HLS
Chrome ✔ ✔
Firefox ✔ ✔
Edge ✔ ✔
QQ Browser ✔ ✔
Safari for macOS ✔ ✔
Safari for iOS ✔ ✔
WeChat/QQ for iOS ✔ ✔
Chrome for Android ✔ ✔
WeChat/QQ for Android ✔ ✔
Mobile QQ Browser ✔ ✔
IE 8, 9, 10, 11 ✔ ✔
©2013-2019 Tencent Cloud. All rights reserved. Page 10 of 32 Video on Demand
Note:
Only the H.264 video encoder is supported. Chrome and Firefox on Windows and macOS are supported. Chrome, Firefox, Edge, and QQ Browser need to load hls.js when playing back HLS files. WeChat and QQ for Android, which have the TBS kernel, natively support MP4 and HLS. Flash is needed to play back videos in IE 8 and HLS files in IE 9/10/11. Please make sure that the browser supports Flash. IE 8 is supported only on Windows 7.
The player is compatible with common browsers and can automatically identify the platform to use the optimal playback scheme. For example, it will use the Flash player in IE 11/10/9/8 to enable the browser to play HLS videos through HTML5, preferably use the HTML5 technology in modern browsers such as Chrome for video playback, and directly use the HTML5 technology or the browser kernel capabilities in mobile browsers.
Transcoding service on VOD platform
As MP4 and HLS (M3U8) are currently the most widely supported formats in desktop and mobile browsers, Tencent Cloud's VOD platform will eventually publish the uploaded videos in MP4 or HLS (M3U8) format.
Preparations
For the specific process, please see Using Superplayer for Playback - Integration Guide.
Initializing Web Player
After the preparations are completed, you can add a video player to your webpage in the following steps:
Step 1. Import files into the page
Import the player style and script files into the right places:
css" rel="stylesheet">
©2013-2019 Tencent Cloud. All rights reserved. Page 11 of 32 Video on Demand
If your business is in a domain-limited region, you can import the following link:
Note: Currently, the module load method for frameworks such as VUE and React is not supported. You can use the player by importing the relevant scripts globally.
Step 2. Place the player container
Place the player container at the desired place on the page. For example, add the following code to index.html (the container ID, width, and height can be customized).
Note:
The player container must be a
©2013-2019 Tencent Cloud. All rights reserved. Page 12 of 32 Video on Demand
meta (which only loads the metadata after the page is loaded) and none (which does not load the video after the page is loaded). Due to system restrictions, videos will not be automatically loaded on mobile devices. The playsinline and webkit-playsinline attributes are used to implement inline playback in case where the standard mobile browser does not hijack the video playback. They are just for reference here and can be used as needed. If the x5-playsinline attribute is set, the X5 UI player will be used in the TBS kernel.
Step 3. Initialize the code
Add the following initialization script to the page initialization code to pass in the fileID (video ID in Media Assets) and appID (which can be viewed in Account Info > Basic Info) obtained in the preparations.
var player = TCPlayer('player-container-id', { // `player-container-id` is the player container I D, which must be the same as that in HTML fileID: '5285890799710670616', // Pass in the `fileID` of the video to be played back, which is r equired appID: '1400329073' // Pass in the `appID` of the VOD account, which is required });
Note: The video to be played back needs to be transcoded by Tencent Cloud as it cannot be guaranteed that the source video can be played back normally in the browser.
Complete Sample Page
Click Sample Code to enter the sample code page, right-click the page, and select the option to view the webpage source code to view the sample source code.
How to Use
Some of the features of the player are described in detail below, including best practices and precautions.
Setting the player size
©2013-2019 Tencent Cloud. All rights reserved. Page 13 of 32 Video on Demand
Here are a few ways to set the size of the player:
The width and height attributes can be set for the
Note:
If you do not set the width and height, the player will set its display size to the obtained resolution of the video. If the viewable zone size of the browser is smaller than the video resolution, the player will overflow the browser's viewable zone; therefore, this is generally not recommended. The best practice is to set the player size through CSS. Skilled use of CSS can achieve effects such as fit to full screen and container adaption.
Sample
Set size through CSS Fit to the viewable zone of the webpage Implement proportional adaption
Enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Resumable playback feature
The prerequisite for enabling resumable playback is that the video is played back through fileID . Only with a unique fileID can the player record the playback time point of the video. If the page is closed before playback is completed, playback can be resumed from where it left off when the page is opened again in the same browser. Resumable playback can be enabled with the following parameters:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required plugins:{ ContinuePlay: { // Enable resumable playback // auto: true, // Whether to resume automatically after the video is played back, which is option al // text: 'You left off at', // Prompt text, which is optional // btnText: 'Resume' // Button text, which is optional },
©2013-2019 Tencent Cloud. All rights reserved. Page 14 of 32 Video on Demand
} });
The effect after this feature is successfully enabled is as shown below:
Sample
Click Resumable Playback to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Note:
This feature is available only for videos that are transcoded by Tencent Cloud and played back through fileID and appID . This feature stores the playback time point in localStorage , which should be supported by the browser. This feature is unavailable for browser-hijacking playback. This feature is not interoperable across platforms/browsers. For example, if the user left off in a PC browser, they cannot resume the playback in a mobile browser or another PC browser. If you want to implement this, you need to develop additional APIs on your own.
©2013-2019 Tencent Cloud. All rights reserved. Page 15 of 32 Video on Demand
Adjustable-Speed playback
If it is supported by the browser, adjustable-speed playback is enabled by default for the player.
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required playbackRates: [0.5, 1, 1.25, 1.5, 2] // Set the adjustable-speed playback option, which is avail able only for HTML5 });
Note:
If the browser does not support adjustable-speed playback, the button will not be displayed on the player.
Thumbnail preview
The VOD superplayer supports thumbnail preview. There are two ways to enable this feature:
1. Generate the thumbnail and VTT files of the video by using the server API. For more information, please see Screencapturing - Image sprite generating template. 2. Generate the thumbnail and VTT files on your own and pass in the URLs of the two files to the player. For more information, please see the sample "Thumbnail preview - Pass in thumbnail and VTT files".
Sample
Thumbnail preview - Generation on server Thumbnail preview - Pass in thumbnail and VTT files
Enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Note:
This feature is only available for desktop browsers. This feature is unavailable for browser-hijacking playback. The more the generated thumbnails, the more accurate the progress bar preview, but the slower the loading. You need to find the desired balance.
©2013-2019 Tencent Cloud. All rights reserved. Page 16 of 32 Video on Demand
Changing fileID for playback
The video can be changed for playback by instantiating the object's loadVideoByID(args) method. The supported parameters are as follows:
player.loadVideoByID({ fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required t: '', // Please see the description of key hotlink protection us: '', // Please see the description of key hotlink protection sign:'', // Please see the description of key hotlink protection exper:'' // Please see the description of the preview feature });
Sample
Click Changing fileID for Playback to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Mirroring feature
You can enable the mirroring feature to flip over the video screen as shown below:
Display the mirroring option in the right-click menu:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required
©2013-2019 Tencent Cloud. All rights reserved. Page 17 of 32 Video on Demand
appID: '', // Pass in the `appID` of the VOD account, which is required plugins: { ContextMenu: { mirror: true } } });
Sample
Click Mirroring Feature to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Note: This feature is unavailable for browser-hijacking playback.
Progress bar marking
You can enable progress bar marking in the player by adding timestamps through the server API as shown below:
How to enable in the player:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required plugins: { ProgressMarker: true } });
Sample
Click Progress Bar Marking to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Note:
This feature is only available for desktop browsers. This feature is unavailable for browser-hijacking playback.
©2013-2019 Tencent Cloud. All rights reserved. Page 18 of 32 Video on Demand
HLS adaptive bitrate playback
The Master Playlist of the HLS specification can be played back at an adaptive bitrate according to the network speed. During video download, if the network speed is high enough to download TS segments with a high bitrate, the player will play back the TS segments; otherwise, it will play back TS segments with a low bitrate. This feature is supported by most mobile and desktop browsers. When the HLS Master Playlist is played back, the player's definition selection feature will become selection of a specified bitrate or automatic selection based on the network speed.
Note:
The automatic switch logic is used by default for adaptive bitrate playback on all devices. As certain browsers do not have the corresponding APIs or support MSE, manual selection of a specified definition is unavailable for such browsers, and the option for switching definitions is also unavailable. Manual selection of a specified bitrate is not supported in Flash playback mode.
Sample
Click HLS Master Playlist to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Referer hotlink protection
For detailed directions on how to enable this feature, please see Referer Hotlink Protection. The following parameters should be added during player initialization:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required flash:{ swf: '//[Tencent Cloud's isolated domain name]/vod-player/[appID]/[fileID]/tcplayer/player.swf' // .swf file address, which is required } });
The SWF URL needs to be passed in. If the browser uses Flash for playback, the Flash player will be obtained from this address. When the Flash player initiates a video request, the request's referer will bring this URL or the URL of the page.
©2013-2019 Tencent Cloud. All rights reserved. Page 19 of 32 Video on Demand
Note:
The referer of the video request initiated by the player in Flash mode will bring the SWF URL in IE and Firefox or the page URL in Chrome. You can also download the player.swf file to your CDN server and pass in the SWF parameter pointing to the path to your CDN server. The isolated domain name provided by Tencent Cloud is a domain name exclusive to each user. One appID corresponds to one domain name, which is usually in the format of [appID].vod2.myqcloud.com . You need to add the domain name of the player SWF URL to the allowlist before videos for which referer hotlink protection is enabled can be played back in Flash mode. The Flash SWF file of the player is stored under the imgcache.qq.com domain name by default. If you need to deploy it to your own server, you can download it here and deploy it by yourself. If your business is in a domain-limited region, the Flash SWF file needs to be stored under the cloudcache.tencent-cloud.com domain name by default. If iframe is embedded in the player page, the referer of the video request will bring iframe src .
Key hotlink protection
For detailed directions on how to enable this feature, please see Key Hotlink Protection. The following parameters should be added during player initialization:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required psign:'' });
The psign parameter is the superplayer signature. For its specific description, please see Superplayer Signature.
Note: If referer hotlink protection is also enabled, simply add the parameters to the sample code of the referer hotlink protection configuration.
Preview
©2013-2019 Tencent Cloud. All rights reserved. Page 20 of 32 Video on Demand
You can use the preview feature only after enabling key hotlink configuration. For detailed directions on how to enable it, please see Key Hotlink Protection. The following parameters should be added during player initialization:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required psign:'' });
The psign parameter is the superplayer signature. For its specific description, please see Superplayer Signature.
Note:
The duration of video playback in the player is the length specified by the exper parameter. Unlike other preview features that control the playback duration on the player side, the player does not get the complete video. Preview works by clipping the video according to the video keyframes, and the actually clipped preview video may be shorter than the pre-configured preview duration value. The player will still display the original video duration after the preview feature is enabled (the preview duration will be displayed for HLS videos in Chrome and Firefox).
Encrypted HLS playback
The playback page must load hls.js , and the playback sample code is as follows:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '' // Pass in the `appID` of the VOD account, which is required psign:'' });
The psign parameter is the superplayer signature. For its specific description, please see Superplayer Signature.
Note:
If the URL of the playback page or Flash SWF has a different domain name from the decryption key server, the key server needs to deploy crossdomain.xml and cross-origin
©2013-2019 Tencent Cloud. All rights reserved. Page 21 of 32 Video on Demand
resource sharing (CORS) to allow Flash and JavaScript to obtain the decryption key across origins. The domain name of SWF URL is configured in crossdomain.xml , which must be placed in the root directory of the key server. The Flash SWF file of the player is stored under the imgcache.qq.com domain name by default. If you need to deploy it to your own server, you can download it here and deploy it by yourself. If your business is in a domain-limited region, the Flash SWF file needs to be stored under the cloudcache.tencent-cloud.com domain name by default. Videos can be encrypted only once. Please strictly follow the steps in the video encryption document. The correct length of a decryption key is 16 bytes, and there cannot be blank characters at the beginning and the end.
Video statistics
Right-click to open the video statistics panel and view the real-time video information. Display the video statistics option in the right-click menu:
var player = TCPlayer('player-container-id', { fileID: '', // Pass in the `fileID` of the video to be played back, which is required appID: '', // Pass in the `appID` of the VOD account, which is required plugins: { ContextMenu: { statistic: true } } });
Sample
Click Video Statistics to enter the sample code page, right-click on the page, and select the option to view the webpage source code to view the sample source code.
Note:
This feature is only available for desktop browsers. This feature is unavailable for browser-hijacking playback.
©2013-2019 Tencent Cloud. All rights reserved. Page 22 of 32 Video on Demand
Changelog
TCPlayer is continuously updated and optimized. The following are the published major versions of TCPlayer:
Date Version Update
1. Changed the default hls.js version to 0.13.2. July 10, 4.1 2. Added the support for key hotlink protection. 2020 3. Fixed other known issues.
1. Fixed the problem where the original video duration was displayed as June 17, the video preview duration. 4.0 2020 2. Added the backend definition configuration. 3. Fixed other known issues.
©2013-2019 Tencent Cloud. All rights reserved. Page 23 of 32 Video on Demand
Development Documentation
Last updated:2021-08-26 17:20:29
This document describes the parameters and APIs of the web superplayer of VOD, which should be used together with User Guide. This document is intended for developers who have a basic knowledge of JavaScript.
Initialization Parameters
Two parameters should be passed in for initializing the player, namely, the player container ID and the function parameter object.
var player = TCPlayer('player-container-id', options); options parameter list
The parameters that can be configured for the options object include:
Default Name Type Description Value
appID String None Required.
fileID String None Required.
Player zone width in pixels, which should be set width String/Number None as needed and can control the player size through CSS.
Player zone height in pixels, which should be set height String/Number None as needed and can control the player size through CSS.
controls Boolean true Whether to display the control bar of the player.
Sets the full address of the cover image (if the uploaded video already has a generated cover, it poster String None will be used preferably. For more information, please see Managing Video).
autoplay Boolean false Whether to play back automatically.
©2013-2019 Tencent Cloud. All rights reserved. Page 24 of 32 Video on Demand
playbackRates Array [0.5, 1, Sets the adjustable-speed playback option, 1.25, which is available only for HTML5. 1.5, 2]
loop Boolean false Whether to loop the video.
muted Boolean false Whether to mute the video.
Whether preloading is required. There are three attributes: "auto", "meta", and "none". Due to preload String auto the system restrictions, "auto" doesn't take effect for mobile devices.
swf String None URL of the .swf file in the Flash player.
posterImage Boolean true Whether to display the cover.
Whether to display the centered play button (the bigPlayButton Boolean true play button embedded by browser-hijacking cannot be removed).
"zh- language String Sets the language. CN"
languages Object None Sets the multilingual dictionary.
Sets the parameter combination of the control controlBar Object None bar attributes as detailed below.
Sets the parameter combination of the plugin plugins Object None function attributes as detailed below.
hls.js startup configuration. For more hlsConfig Object None information, please see Fine Tuning.
Note:
The controls , playbackRates , loop , preload , and posterImage parameters won't take effect during browser-hijacking playback. controlBar parameter list
The controlBar parameters can configure the features of the player's control bar. The supported attributes include:
Name Type Default Description
©2013-2019 Tencent Cloud. All rights reserved. Page 25 of 32 Video on Demand
Value
Whether to display the play/pause playToggle Boolean true toggle button.
progressControl Boolean true Whether to display the progress bar.
volumePanel Boolean true Whether to display the volume control.
Whether to display the current time of currentTimeDisplay Boolean true the video.
durationDisplay Boolean true Whether to display the video duration.
timeDivider Boolean true Whether to display the time separator.
Whether to display the playback speed playbackRateMenuButton Boolean true selection button.
Whether to display the full screen toggle fullscreenToggle Boolean true button.
Whether to display the definition QualitySwitcherMenuButton Boolean true switching menu.
Note:
The controlBar parameters won't take effect during browser-hijacking playback. plugins parameter list
The plugins parameters can configure the features of the player plugins. The supported attributes include:
Default Name Type Description Value
Controls the playback resumption feature. The supported attributes include: auto: false (whether to automatically resume during ContinuePlay Object None playback). text: "You left off at" (prompt text). btnText: "Resume" (button text).
©2013-2019 Tencent Cloud. All rights reserved. Page 26 of 32 Video on Demand
Object Methods
Below lists the methods of the objects returned by player initialization:
Returned Parameter Name Value and Description and Type Type
Sets the callback after the player is ready(function) (Function) None initialized.
play() None None Plays and resumes the video.
pause() None None Pauses the video.
Gets the current playback timepoint, or currentTime(seconds) (Number) (Number) sets the playback timepoint, which cannot exceed the video duration.
duration() None (Number) Gets the video duration.
(Number) / (Number) No return volume(percent) [0, 1] Gets or sets the player volume. when [optional] setting
(String) / No poster(src) (String) return when Gets or sets the player cover. setting
requestFullscreen() None None Enters full screen mode.
exitFullscreen() None None Exits full screen mode.
Returns whether full screen mode is isFullscreen() None Boolean entered.
(String, on(type,listerner) None Listens on events. Function)
(String, Listens on events. The event handler can one(type,listerner) None Function) be executed at most once.
(String, off(type,listerner) None Unbinds event listening. Function)
buffered() None TimeRanges Returns the time range of video
©2013-2019 Tencent Cloud. All rights reserved. Page 27 of 32 Video on Demand
buffering.
Value range Returns the percentage of the buffered bufferedPercent() None [0, 1] length in the video duration.
(Number) / Gets or sets the width of the player zone. (Number) No return width() If the player size is set through CSS, this [optional] when method won't take effect. setting
(Number) / Gets or sets the height of the player (Number) No return height() zone. If the player size is set through [optional] when CSS, this method won't take effect. setting
videoWidth() None (Number) Gets the width of the video resolution.
videoHeight() None (Number) Gets the height of the video resolution.
dispose() None None Terminates the player.
Note:
Object methods cannot be called synchronously but can be called only after the corresponding events (such as loadedmetadata ) are triggered, except ready , on , one , and off .
Event
The player can perform event listening through the objects returned by the initialization, for example:
var player = TCPlayer('player-container-id', options); // player.on(type, function); player.on('error', function(error) { // Process });
Here, type is the event type. The supported events include:
Name Description
play Playback has started. This is triggered when the play() method is called or autoplay is set to true and takes effect. At this time, the paused
©2013-2019 Tencent Cloud. All rights reserved. Page 28 of 32 Video on Demand
attribute is false .
Triggered when the playback is paused due to buffering or resumed after pause. The paused attribute is false . Usually, this event is used to playing mark that the video playback has actually started, as the play event just starts the playback, but the image has not started rendering.
loadstart Triggered when data loading starts.
durationchange Triggered when the duration data of the video changes.
loadedmetadata The video metadata has been loaded.
This event is triggered when the data of the current frame is loaded but loadeddata there is no enough data to play back the next frame of the video.
progress Triggered when the media data is obtained.
canplay Triggered when the player is able to start playing back the video.
Triggered when the player is expected to be able to continue playing back canplaythrough the specified video without buffering.
error Triggered when an error occurs in video playback.
pause Triggered when the video is paused.
ratechange Triggered when the playback speed changes.
seeked Triggered when seeking for the specified playback position ends.
seeking Triggered when seeking for the specified playback position starts.
The current playback position has changed, which can be understood as timeupdate that currentTime has changed.
Triggered when the volume is set or the value of the muted attribute volumechange changes.
Triggered when the video is stopped and the next frame of content is waiting unavailable.
Triggered when the video playback ends. In this case, the currentTime ended value is equal to the maximum value of the media resource.
resolutionswitching Definition switching is in progress.
resolutionswitched Definition switching is completed.
©2013-2019 Tencent Cloud. All rights reserved. Page 29 of 32 Video on Demand
fullscreenchange Triggered when full screen mode is switched.
Error Codes
When the player triggers an error event, the listener will return an error code. Error codes containing more than 3 digits are for media data APIs. Below is the error code list:
Name Description
-1 The player didn't detect an available video address.
-2 Getting video data timed out.
The video data was interrupted during loading. Possible causes: The network was interrupted. The browser was interrupted. 1 Solutions: Check the network request information in the network console to confirm whether the network request was normal. Restart the playback process.
Failed to load the video due to network problems. Possible causes: the network was interrupted. Solutions: 2 Check the network request information in the network console to confirm whether the network request was normal. Restart the playback process.
An error occurred while decoding the video. Possible causes: the video data was exceptional and the decoder failed to decode it. Solutions: 3 Try transcoding and playing back the video again to troubleshoot problems introduced by the transcoding process. Check whether the original video is normal. Contact technical support and provide playback parameters for troubleshooting.
4 The video couldn't be loaded due to unsupported format or server or network issues. Possible causes: The video data couldn't be obtained, the CDN resource does not exist, or the video data was not returned. The current playback environment does not support this video format. Solutions:
©2013-2019 Tencent Cloud. All rights reserved. Page 30 of 32 Video on Demand
Check the network request information in the network console to confirm whether the video data request was normal. Check whether the corresponding playback script for this video format was loaded according to the user guide. Check whether the current browser and webpage environment support this video format. Contact technical support and provide playback parameters for troubleshooting.
An error occurred while decrypting the video. Possible causes: The decryption key is incorrect. The key requesting API returned exceptionally. 5 The current playback environment doesn't support the video decryption feature. Solutions: Check whether the key is correct and whether the key API returns normally. Contact technical support and provide playback parameters for troubleshooting.
Requesting the VOD media data API timed out. When trying to get the media data, if the player still has no response after 3 retries, this error will be thrown. Possible causes: The current network couldn't connect to the media data API, or the media data API was hijacked. 10 The media data API was exceptional. Solutions: Try opening the demo page provided by us to see whether it can play back the video normally. Contact technical support and provide playback parameters for troubleshooting.
The VOD media data API didn't return any data. When trying to get the media data, if the player still doesn't receive data after 3 retries, this error will be thrown. Possible causes: The current network couldn't connect to the media data API, or the media data API was hijacked. 11 The media data API was exceptional. Solutions: Try opening the demo page provided by us to see whether it can play back the video normally. Contact technical support and provide playback parameters for troubleshooting.
12 The VOD media data API returned exceptional data. When trying to get the media data, if the player still receives unparseable data after 3 retries, this error will be thrown. Possible causes: The current network couldn't connect to the media data API, or the media data API was hijacked.
©2013-2019 Tencent Cloud. All rights reserved. Page 31 of 32 Video on Demand
The playback parameters were incorrect and thus couldn't be processed by the media data API. The media data API was exceptional. Solutions: Try opening the demo page provided by us to see whether it can play back the video normally. Contact technical support and provide playback parameters for troubleshooting.
The player didn't detect video data that could be played back in the current player. 13 Please transcode the video.
A network exception occurred while playing back an HLS video in HTML5 + hls.js 14 mode. The exception details can be viewed in event.source . For more information, please see Network Errors.
A multimedia exception occurred while playing back an HLS video in HTML5 + hls.js 15 mode. The exception details can be viewed in event.source . For more information, please see Media Errors.
A remuxing exception occurred while playing back an HLS video in HTML5 + hls.js 16 mode. The exception details can be viewed in event.source . For more information, please see Mux Errors.
An exception of other types occurred while playing back an HLS video in HTML5 + 17 hls.js mode. The exception details can be viewed in event.source . For more information, please see Other Errors.
The media data service did not find the media data corresponding to the playback 10008 parameters. Please check whether the request parameters appID and fileID are correct and whether the corresponding media data has been deleted.
©2013-2019 Tencent Cloud. All rights reserved. Page 32 of 32