tencent cloud

All product documents
Video on Demand
DocumentationVideo on DemandPlayer SDKIntegration (No UI)Web IntegrationTCPlayer Integration Guide
TCPlayer Integration Guide
Download PDF
Last updated: 2024-04-11 16:48:34
TCPlayer Integration Guide
Last updated: 2024-04-11 16:48:34
Download PDF
This document introduces the Web Player SDK (TCPlayer) tailored for both VOD and live streaming. It can be quickly integrated with your own web application to enable video playback features. TCPlayer comes with a default set of UI elements, which you can use as needed.

Overview

The web player utilizes the <video> tag of HTML5 and Flash for video playback. It offers a uniform video playback experience across different platforms when browsers do not natively support video playback. In conjunction with Tencent's Video on Demand service, it provides hotlink protection and features for playing standard encrypted HLS videos.

Supported protocols

Audio/Video Protocol
Use
URL Format
PC Browser
Mobile Browser
MP3
Audio
http://xxx.vod.myqcloud.com/xxx.mp3
Supported
Supported
MP4
VOD playback
http://xxx.vod.myqcloud.com/xxx.mp4
Supported
Supported
HLS(M3U8)
Live stream
http://xxx.liveplay.myqcloud.com/xxx.m3u8
Supported
Supported
VOD playback
http://xxx.vod.myqcloud.com/xxx.m3u8
Supported
Supported
FLV
Live stream
http://xxx.liveplay.myqcloud.com/xxx.flv
Supported
Partially supported
VOD playback
http://xxx.vod.myqcloud.com/xxx.flv
Supported
Partially supported
WebRTC
Live stream
webrtc://xxx.liveplay.myqcloud.com/live/xxx
Supported
Supported
Note:
Only H.264 encoding is supported.
The player is compatible with mainstream browsers and can automatically select the optimal playback scheme depending on the browser.
In some browser environments, HLS and FLV video playback depends on Media Source Extensions.
If a browser does not support WebRTC, a WebRTC URL passed in will be converted automatically to better support playback.

Supported Features

Feature\\Browser
Chrome
Firefox
Edge
QQ Browser
Mac Safari
iOS Safari
WeChat
Android Chrome
IE 11
Player dimension configuration
✓
✓
✓
✓
✓
✓
✓
✓
✓
Resuming playback
✓
✓
✓
✓
✓
✓
✓
✓
✓
Playback speed change
✓
✓
✓
✓
✓
✓
✓
✓
✓
Preview thumbnails
✓
✓
✓
✓
-
-
-
-
✓
Changing `fileID` for playback
✓
✓
✓
✓
✓
✓
✓
✓
✓
Flipping videos
✓
✓
✓
✓
✓
✓
✓
✓
✓
Progress bar marking
✓
✓
✓
✓
✓
-
-
-
✓
HLS adaptive bitrate
✓
✓
✓
✓
✓
✓
✓
✓
✓
Referer hotlink protection
✓
✓
✓
✓
✓
✓
✓
-
✓
Definition change notifications
✓
✓
✓
✓
-
-
-
✓
✓
Preview
✓
✓
✓
✓
✓
✓
✓
✓
✓
Playing HLS videos encrypted using standard schemes
✓
✓
✓
✓
✓
✓
✓
✓
✓
Playing HLS videos encrypted using private protocols
✓
✓
✓
-
-
-
Android:✓
iOS: -
✓
✓
Video statistics
✓
✓
✓
✓
-
-
-
-
-
Video data monitoring
✓
✓
✓
✓
-
-
-
-
-
Custom UI messages
✓
✓
✓
✓
✓
✓
✓
✓
✓
Custom UI
✓
✓
✓
✓
✓
✓
✓
✓
✓
On-screen comments
✓
✓
✓
✓
✓
✓
✓
✓
✓
Watermark
✓
✓
✓
✓
✓
✓
✓
✓
✓
Ghost watermark
✓
✓
✓
✓
✓
✓
✓
✓
✓
Playlist
✓
✓
✓
✓
✓
✓
✓
✓
✓
Frame sync under poor network conditions
✓
✓
✓
✓
✓
✓
✓
✓
✓
Note:
Only H.264 encoding is supported.
Chrome and Firefox for Windows and macOS are supported.
Chrome, Firefox, Edge, and QQ Browser need to load hls.js to play HLS.
The Referer hotlink protection feature is based on the Referer field of HTTP request headers. Some HTTP requests initiated by Android browsers do not carry the Referer field.
The player is compatible with mainstream browsers and can automatically select the optimal playback scheme depending on the browser used. For example, for modern browsers such as Chrome, the player uses the HTML5 technology for playback, and for mobile browsers, it uses the HTML5 technology or the browser’s built-in capabilities.

Preparations

From version 5.0.0, the TCPlayer SDK for Web (TCPlayer) requires access to a License authorization for use. If you don't need the new premium functions, you can apply for a basic License to try TCPlayer for free; if you want to use the newly added premium functions you need to purchase a premium License. The detailed information is as follows:
TCPlayer feature
Feature Scope
Required License
Pricing
Authorization Unit
Basic Functions
Includes all features provided in versions prior to 5.0.0, see Product Features for details
Web Player Basic Version License
An exact domain (1 License can authorize up to 10 exact domains)
Premium Functions
Basic Version Features, VR Playback, Security Check
Web Player Premium Version License
399 CNY/month Buy Now
Wildcard Domain (1 License can authorize up to 1 wildcard domain)
Note:
1. Web Player Basic Version License can be applied for free, with a default validity of 1 year; if the remaining validity period is less than 30 days, it can be renewed for free.
2. To facilitate local development, the player won't authenticate localhost or 127.0.01; hence, these types of local service domain names need not be applied for when requesting a License.

Integration Guide

By following these steps, you can add a video player to your website.

Step 1. Import files into the page

The Player SDK supports two integration methods: CDN and NPM:

1. Integration through CDN

Create a new index.html file in your local project and import the player style and script files into the HTML page:
 <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/>
 <!--Player script file-->
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
It is recommended to deploy resources on your own when using the Player SDK, click Download player resources. Deploy the unzipped folder without altering its directory structure to prevent cross-referencing issues between resources. If the deployment address is aaa.xxx.ccc, import the player style and script files at the appropriate places. When deploying on your own, you need to manually reference the dependency files under the libs folder of the resource package, otherwise, the Tencent Cloud CDN files will be requested by default.
 <link href="aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/>
 <!--To play HLS format videos in modern browsers like Chrome and Firefox through H5, hls.min.x.xx.m.js must be included before tcplayer.vx.x.x.min.js.-->
 <script src="aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script>
 <!--Player script file-->
 <script src="aaa.xxx.ccc/tcplayer.vx.x.x.min.js"></script>

2. Integration through npm

First, install the tcplayer npm package:
npm install tcplayer.js
Import the SDK and style files:
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';

Step 2. Place the player container

Add the player container to the location on the page where the player is to be displayed. For example, add the following code in index.html (the container ID and dimensions can be custom defined).
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
Note:
The player container must be a <video> tag.
In the example, player-container-id is the ID of the player container, which you can set yourself.
We recommend you set the size of the player container zone through CSS, which is more flexible than the attribute and can achieve effects such as fit to full screen and container adaption.
The preload attribute in the example specifies whether to load the video after the page is loaded. It is usually set to auto for faster video playback. Other options are: meta (to only load metadata after the page loads) and none (to not load the video after the page loads). Videos will not automatically load on mobile devices due to system restrictions.
The attributes playsinline and webkit-playsinline are used to achieve inline playback in standard mobile browsers without hijacking video playback. This is just an example, please use as needed.
Setting the x5-playsinline attribute in the TBS kernel will utilize the X5 UI player.

Step 3. Initialize the player

After page initialization, you can play video resources. The player supports both video on demand (VOD) and live streaming playback scenarios as follows:
VOD playback: The player can play Tencent Video on Demand media resources through FileID. For the specific VOD process, please refer to the Using the Player for Playback document.
Live playback: The player can pull a live audio/video stream for playback by passing in a URL. For information on generating a Tencent Cloud Streaming Services URL, see Splicing Live Streaming URLs.
URL playback (VOD and live)
File ID playback (VOD)
After page initialization, call the method in the player instance to pass in the URL to the method.
// `player-container-id` is the player container ID, which must be the same as in HTML
var player = TCPlayer('player-container-id', {
    sources: [{
      src: 'Please replace with your playback URL',
    }],
    licenseUrl: 'Please replace with your licenseUrl', // License URL, see the preparation section. You can obtain the licenseUrl after applying for a license in the RT-Cube console
    language: 'Please replace with your Setting language', // Setting language en | zh-CN
});

// player.src(url); // URL playback address
In the initialization code on the index.html page, add the following initialization script. Pass in the video ID and appID obtained during the preparation phase from the fileID (in Media Management) and (peek in Account Information > Basic Information).
var player = TCPlayer('player-container-id', { // player-container-id is the player container ID, which must be the same as that in HTML
    fileID: 'Please enter your fileID', // Enter the fileID of the video to be played
    appID: 'Please enter your appID', // Enter the appID of your VOD account
    // Enter the player Signature psign, for information on the Signature and how to generate it see the link: https://www.tencentcloud.com/document/product/266/42436?from_cn_redirect=1
    psign: 'Please enter your player Signature psign',
    licenseUrl: 'Please enter your licenseUrl', // Refer to the preparation section. You can obtain the licenseUrl after applying for a license in the RT-Cube console
    language: 'Please replace with your Setting language', // Setting language en | zh-CN
});
Note:
Not all videos can be played successfully in a browser. We recommend you use Tencent Cloud’s services to transcode a video before playing it.

Step 4. Implement more features

You can utilize the server-side capabilities of Video on Demand (VOD) for advanced features, such as automatic switching of adaptive streams, video thumbnail previews, and adding video marker information. These features are detailed in Play back a long video, which you can refer to for implementation.
Additionally, the player offers more features. For a list of features and instructions on how to use them, please see the Feature Demonstration page.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon