Video on Demand Player SDK Documentation

Video on Demand

Product Documentation

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 aﬃliated 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. Speciﬁc products and services and the standards applicable to them are exclusively provided for in Tencent Cloud's applicable terms and conditions.

Contents

Player SDK Documentation Playback SDK Overview Integration on iOS Superplayer for iOS Integration on Web Superplayer TCPlayer User Guide Development Documentation

Player SDK Documentation Playback SDK Overview

Last updated：2021-08-23 17:53:03

VOD provides the basic player and superplayer for diﬀerent scenarios.

In short video playback scenarios (such as short videos on UGSV social media, ecommerce platforms, and WeChat Oﬃcial 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

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.

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, deﬁnition selection, gestures, small window playback, etc. Advanced features: video buﬀering, 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 Podﬁle:

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

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 _playerView = [[SuperPlayerView alloc] init]; // Set the delegate to accept events _playerView.delegate = self; // Set the parent View; `_playerView` will be automatically added under `holderView` _playerView.fatherView = self.holderView; SuperPlayerModel *playerModel = [[SuperPlayerModel alloc] init]; SuperPlayerVideoId *video = [[SuperPlayerVideoId alloc] init]; // Set the playback information video.appId = 1256993030; //AppId video.fileId = @"7447398157015849771"; // Video `FileId` video.playDefinition = @"10"; // Playback template ID video.version = FileIdV3; playerModel.videoId = video; // Start playback [_playerView playWithModel:self.playerModel];

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 ﬁxed 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.

Thumbnails and Timestamps

When videos are played back, the "thumbnails" and "timestamps" on the progress bar can help viewers ﬁnd 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 ﬂoats 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.

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 ﬂexible 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 ✔ ✔

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 ﬁles. 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 ﬁles 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 speciﬁc 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 ﬁles into the page

Import the player style and script ﬁles into the right places:

css" rel="stylesheet">

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

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

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 oﬀ 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 },

} });

The eﬀect 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 oﬀ 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.

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 ﬁles

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 ﬁnd the desired balance.

Changing ﬁleID 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 ﬁleID 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 ﬂip 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

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:

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.

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.

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:

The psign parameter is the superplayer signature. For its speciﬁc 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 conﬁguration.

Preview

You can use the preview feature only after enabling key hotlink conﬁguration. For detailed directions on how to enable it, please see Key Hotlink Protection. The following parameters should be added during player initialization:

The psign parameter is the superplayer signature. For its speciﬁc description, please see Superplayer Signature.

Note：

The duration of video playback in the player is the length speciﬁed 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-conﬁgured 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 speciﬁc description, please see Superplayer Signature.

Note：

If the URL of the playback page or Flash SWF has a diﬀerent domain name from the decryption key server, the key server needs to deploy crossdomain.xml and cross-origin

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:

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.

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 deﬁnition conﬁguration. 3. Fixed other known issues.

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 conﬁgured for the options object include:

Default Name Type Description Value

appID String None Required.

ﬁleID 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.

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 eﬀect for mobile devices.

swf String None URL of the .swf ﬁle 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 conﬁguration. For more hlsConﬁg Object None information, please see Fine Tuning.

Note：

The controls , playbackRates , loop , preload , and posterImage parameters won't take eﬀect during browser-hijacking playback. controlBar parameter list

The controlBar parameters can conﬁgure the features of the player's control bar. The supported attributes include:

Name Type Default Description

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 deﬁnition QualitySwitcherMenuButton Boolean true switching menu.

Note：

The controlBar parameters won't take eﬀect during browser-hijacking playback. plugins parameter list

The plugins parameters can conﬁgure 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 oﬀ at" (prompt text). btnText: "Resume" (button text).

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, oﬀ(type,listerner) None Unbinds event listening. Function)

buﬀered() None TimeRanges Returns the time range of video

buﬀering.

Value range Returns the percentage of the buﬀered buﬀeredPercent() 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 eﬀect. 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 eﬀect. 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 eﬀect. At this time, the paused

attribute is false .

Triggered when the playback is paused due to buﬀering 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 speciﬁed video without buﬀering.

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 speciﬁed playback position ends.

seeking Triggered when seeking for the speciﬁed 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 Deﬁnition switching is in progress.

resolutionswitched Deﬁnition switching is completed.

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 conﬁrm 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 conﬁrm 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:

Check the network request information in the network console to conﬁrm 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.

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 ﬁnd 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.