tencent cloud

Feature Description

This document describes how to use the Web Player (Web SDK) of Tencent Cloud VOD service, which allows users to directly use the proven video playback capability. Through flexible APIs, the SDK can be easily integrated with self-built Web Apps to achieve the playing with desktop Apps. At the same time, the Web SDK provides the capability of uploading videos at Web end.

The file formats supported by the SDK are limited by the global hotlink protection feature. For more information, please see FAQs on the official website. This document is intended for developers who want to use Tencent Cloud VOD player Web SDK for development and have basics knowledge in JavaScript.

Supported Features

Playback Format

The following table lists the video formats supported by Web SDK:

Android system compatibility: Unlike iPhones that only use a Safari browser, a wide range of native browsers may come with Android phones. For this reason, compatibility of Android browsers has become a problem that plagues the industry. Therefore, the above table does not apply to all Android phones.

Upload format

Video formats supported by the SDK for upload are as follows:

Transcode service of the VOD platform: Since MP4 and HLS (m3u8) formats are relatively widely supported for both PC and mobile browsers, Tencent Cloud VOD platform always publishes the uploaded videos in these formats.

Platform compatibility

It requires excessive effort to create two sets of codes for smartphone browser and PC browser. However, by using this player, the same code will adapt itself to PC browser/smartphone browser, which means the player will automatically choose the optimal playback method according to the platform it runs on. For example: On PC, the service will use Flash player as first priority in order to cope with various video formats. On smartphone, the service will use HTML5 technology to play videos instead.

Preparations

Step 1: Activate the service

Sign up for a Tencent Cloud account at Tencent Cloud official website, and activate the VOD service.

Step 2: Upload files

After the VOD service is activated, go to VOD Video Management to upload new video files. Since the document is meant to introduce how to use the player, this operation can help you obtain your own online video address. You are unable to enter this page if you haven't activated VOD service.

Step 3: Obtain an ID

After the video is uploaded, you can find the file ID (the most basic information for the player to play videos) in the Video Management page. The player also includes Quality Statistics feature. You need to verify your APPID which can be queried in the Video Management page before using the player. In the figure below, the ID on the left is the video file ID, while the other one is your APPID.

Step 4: Prepare pages

Introduce the initialization script to the page in which you want to play videos (including PC or H5):

<script src="//qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>;

Local file restriction: You cannot play local files using the player due to cross-domain issues. You must access the player through an IP or domain--this is why we asked you to upload a video file first and acquire its online playback address.

Adding Player

You can add a video player into your page by following the two simple steps below.

Step 1: Add a player container

Place a player container in the page where you want to display the player. For example, add the following code into index.html. The container ID, width and height can be customized.

<div id="id_video_container" style="width:100%; height:auto;"></div>;

Step 2: Create a Player object

Next, create a player object in the introduced JavaScript using a player constructor.

var player = new qcVideo.Player("id_video_container", {
    "file_id": "1465197896261041838",
    "app_id": "125132611",
    "width":640,
    "height":480
});

The constructor is used to generate a player object and find the corresponding video to play based on file_id and app_id. You can control the player with the player object. For more information, please see Overview of API Methods for the parameter options of player object.

Complete sample code

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>VOD</title>
</head>
<body>
<div id="id_video_container" style="width:100%; height:auto;"></div>
<script src="//qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>
<script type="text/javascript">
    (function () {
        var player = new qcVideo.Player("id_video_container", {
            "file_id": "1465197896261041838",
            "app_id": "125132611",
            "width":640,
            "height":480
        });
    })()
</script>
</body>
</html>

Other Cases

case 1: How do I play a video if I have the video address but not the file_id and app_id?

Video playback address need to be passed, in which case file_id and app_id are not required. JS example:

    var option = {
    "width": 640,
    "height": 480,
    //...You may use other custom attributes
    "third_video": {
    "urls":{
            20 : "http://208.vod.myqcloud.com/204.mp4"//This is only an example. Please replace this with actual video address
        }
    }
};
var player = new qcVideo.Player("id_video_container", option);

The "urls" attribute of the "third_video" parameter is an Object, where you can pass multiple video addresses with different video definitions. Detailed parameter descriptions can be found in Overview of API Methods.

Note:
"urls" should include at least one video address

case 2: How to use "On-screen Comment"?

After the initialization of player, you can add on-screen comments for videos by calling the addBarrage(barrage) method of player object. For more information on parameters, please see Overview of API Methods. For example, add two on-screen comments for the video that is being played:

var barrage = [
{"type":"content", "content":"hello world", "time":"1"},
{"type":"content", "content":"Center", "time":"1", "style":"C64B03;30","position":"center"}
];
player.addBarrage(barrage);

Note:
On-screen comment is only implemented at the frontend. Backend support should be self-developed. This feature only applies to Flash players on PC, but not supported in H5.

Case 3: How do I perform some operations at the end of the video, such as video recommendation?

Use the listener parameter and pass a callback function for the playStatus event. This function will be called when the playback status changes. For description on the specific callback function parameters, please see API Overview.

For example:

var option ={
    "file_id":"1465197896261041838",
    "app_id":"125132611",
    "width":800,
    "height":720
    //...You may use other custom attributes
};
var listener = {
    playStatus: function (status){
        //TODO
        console.log(status);
    }
};
var player = new qcVideo.Player("id_video_container", option, listener);

Case 4: How to make the player remember video playback progress and start playing the video from the same point the next time?

In "option", set the parameter "remember" to 1. The player records the time point when the video was stopped in the previous playback, and continues from this point upon the next playback. For example:

var option ={
    "file_id":"1465197896261041838",
    "app_id":"125132611",
    "width":800,
    "height":720,
    "remember":1
    //...You may use other custom attributes
};
var player = new qcVideo.Player("id_video_container", option);

Case 5: How to make the player adjust its size automatically along with the web page?

Use the player object method "resize(width, height)" to modify player size dynamically.

player.resize(640, 480);

Case 6: How to play videos that have been configured with passwords from Cloud Video Management?

Just like playing normal videos, SDK automatically displays a password input window. Playback starts after the password is entered.

Note:
Password feature is only available when playing videos by passing video IDs.

Case 7: How to generate a link that is shared by using a QR code or a link?

Example (please replace the appid and fileid in the link with actual IDs):

http://play.video.qcloud.com/qrplayer.html?appid=1251769111&fileid=14651978969211156176147&autoplay=0&sw=640&sh=426&$def=20&wmode=transparent

http://play.video.qcloud.com/iplayer.html?appid=1251769111&fileid=14651978969211156176147&autoplay=0&sw=1800&sh=1200&def=20&wmode=transparent

Case 8: How to specify video playback definition?

Use the "definition" parameter to specify the definition with which the video is played (on condition that the definition is available for this video). This is available for two playback methods: play with video ID and play with address. See Parameter Description link for more information. For example:

var option ={
    "file_id":"14651978969261415426",
    "app_id":"1251606588",
    "definition":30,
    "width":800,
    "height":700
};

var player = new qcVideo.Player("id_video_container", option);

Overview of API Methods

Constructor

qcVideo.Player(id, option, listener);

ID: String; Required; This parameter indicates the ID of the container where the player is located in the page and can be customized.
option: Object ; Required.
This parameter indicates the options that can be set for player's parameters. The options are as follows:

listener: Object; Optional; List of callback functions in case of playing status change.

Obtain parameter and status

Here are the methods for obtaining parameters and statuses for player object that is returned by the constructor

Settings and actions

The player objects returned by the constructors can be set using the following methods:

Video File Upload

Users can use VOD Web SDK to upload videos. Tencent Cloud Video users can therefore upload video files using Web. The SDK supports uploading via HTML5, but it's not possible for browsers that do not support HTML5.

For more information on how to proceed, see Cloud VOD Web Upload SDK.