Overview
This document shows you how to encrypt videos using DRM solutions and play the encrypted videos with a player.
Prerequisites
Before you start, do the following:
Activating VOD
Follow the steps below to activate VOD:
At this point, you have activated VOD.
Step 1. Enable Hotlink Protection
The example below shows how to enable key hotlink protection for the default distribution domain under your account:
Note:
We do not recommend enabling hotlink protection for a domain name already in use. Doing so may cause failure to play existing videos.
1. Log in to the VOD console, select Distribution and Playback > Domain Name on the left sidebar. Find the default distribution domain, click Set on the right, and select the Access Control tab.
2. Toggle on Key Hotlink Protection. In the pop-up window, click Generate to generate a random key (suppose it is vodtestkey
). Copy the key and click Confirm. You will use the key later to generate playback signatures.
Step 2. Encrypt a Video
1. In the VOD console, select Media Assets > Video/Audio Management on the left sidebar, select the target video (in this example, the file ID of the video encrypted is 387702304941991610
), and click Process. 2. On the video processing page:
Select Task Flow as the Processing Type.
Select WidevineFairPlayPreset as the Task Flow Template.
Note:
WidevineFairPlayPreset
is a preset task flow. It uses the adaptive bitrate streaming template 11 or 13, the time point screenshot template 10 (for thumbnail generation), and the image sprite template 10.
The adaptive bitrate streaming template 11 generates multi-bitrate streams encrypted by FairPlay, and the adaptive bitrate streaming template 13 generates multi-bitrate streams encrypted by Widevine.
3. Click Confirm and wait until the Video Status changes from "Processing" to "Normal", which indicates that video processing is completed.
4. Click Manage in the Operation column of the video.
Under the Basic Info tab, you can view the thumbnail generated and outputs of adaptive bitrate streaming (template ID: 11 & 13).
Under the Screenshot Info tab, you can view the image sprite generated (template ID: 10).
Step 3. Generate a Player Signature
You will need the player signature to query past playback information. For directions on how to generate a player signature, see Superplayer Signature. For the example in this document, the payload for signature generation is as follows: {
"appId": 1500014561,
"fileId": "387702304941991610",
"currentTimeStamp": 1661163373,
"expireTimeStamp": 2648557919,
"pcfg":"advanceDrmPreset"
}
The key generated for the example in this document is vodtestkey
, and the player signature (psign
) generated is as follows:
eyJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6MTUwMDAxNDU2MSwiZmlsZUlkIjoiMzg3NzAyMzA0OTQxOTkxNjEwIiwiY3VycmVudFRpbWVTdGFtcCI6MTY2MTE2MzM3M
ywiZXhwaXJlVGltZVN0YW1wIjoyNjQ4NTU3OTE5LCJwY2ZnIjoiYWR2YW5jZURybVByZXNldCJ9.rEZLhjgsoLc2htIUI_HckxvhVmdBhQyf5d-2Kku1JeA
Step 4. Play the DRM-encrypted video
Web
Using the VOD player
To play the DRM-encrypted video using the VOD player, just pass in the file ID of the video and your VOD account’s AppID when initializing the player.
Step 1. Import files
Import the player’s style file and script files into the webpage.
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css" rel="stylesheet"/>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/dash.all.min.4.4.1.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>
Step 2. Add a player container
Add a player container to wherever you want to display the player:
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
Note:
You can customize the container ID as well as the height and width of the container.
Step 3. Add the initialization code
Add the following script to your page initialization code and pass in the required initialization parameters (including the Player Signature psign
generated in Step 3):
var player = TCPlayer('player-container-id', {
appID: '1500014561' // The appID of your VOD account (required).
fileID: '387702304941991610', // The file ID of the video to play (required).
psign: 'eyJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6MTUwMDAxNDU2MSwiZmlsZUlkIjoiMzg3NzAyMzA0OTQxOTkxNjEwIiwiY3VycmVudFRpbWVTdGFtcCI6MTY2MTE2MzM3MywiZXhwaXJlVGltZVN0YW1wIjoyNjQ4NTU3OTE5LCJwY2ZnIjoiYWR2YW5jZURybVByZXNldCJ9.rEZLhjgsoLc2htIUI_HckxvhVmdBhQyf5d-2Kku1JeA',
// For other parameters, see https://www.tencentcloud.com/document/product/266/39105
});
iOS
To play the DRM-encrypted video on iOS, refer to Integration Guide (Through FileId
). You need to use the player signature (psign
) generated in Step 3 (Generate a Player Signature).
Android
To play the DRM-encrypted video on Android, refer to Integration Guide (Through FileId
). You need to use the player signature (psign
) generated in Step 3 (Generate a Player Signature).
Summary
Now, you have learned how to encrypt videos using DRM solutions and play the encrypted videos in a player.
Was this page helpful?