集成腾讯云TcPlayer并实现web端视频播放

npm方式集成

//在终端输入下载
npm install tcplayer.js

//在所需要的界面的script处引入
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';

页面内放置播放器组件

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

播放器初始化

var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
    fileID: '3701925921299637010', // 请传入需要播放的视频 fileID（必须）
    appID: '1500005696' // 请传入点播账号的 appID（必须）
  	psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',
});

上面是播放器初始化的代码，其中，psign是播放器派发的签名，需要先得到签名才可以播放。

psign签名参数

签名获取类

官方的产品文档提供了签名获取的实例代码，稍作注释后展示在下方。不过该实例是静态的，可以稍作修改，将fileId、appId等作为参数传入，动态获取签名。

import java.util.*;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTCreationException;
import com.auth0.jwt.JWT;

class Main {
    public static void main(String[] args) {
        Integer AppId = 1255566655;
        String FileId = "4564972818519602447";
        String AudioVideoType = "RawAdaptive";
        Integer RawAdaptiveDefinition = 10;
        Integer ImageSpriteDefinition = 10;
        // 设置签名派发的当前时间（必须的）和过期时间（不必须，不填就默认不会过期）
        // 所有的时间戳都是unix时间戳，可以用(int)System.currentTimeMillis()生成
        Integer CurrentTime = (int)System.currentTimeMillis();
        Integer PsignExpire = (int)System.currentTimeMillis();
    
        // playkey需要在控制台处找到
        String PlayKey = "TxtyhLlgo7J3iOADIron";
        
        // 防盗链之类的配置，不是必须的
        HashMap<String, Object> urlAccessInfo = new HashMap<String, Object>();
        String UrlTimeExpire = "5ebe9423‬";
        urlAccessInfo.put("t", UrlTimeExpire);
        // 必须的，是被点播文件的具体内容
        HashMap<String, Object> contentInfo = new HashMap<String, Object>();
        contentInfo.put("audioVideoType", AudioVideoType);
        contentInfo.put("rawAdaptiveDefinition", RawAdaptiveDefinition);
        contentInfo.put("imageSpriteDefinition", ImageSpriteDefinition);

        // 生成签名
        try {
            Algorithm algorithm = Algorithm.HMAC256(PlayKey);
            String token = JWT.create().withClaim("appId", AppId).withClaim("fileId", FileId)
                    .withClaim("contentInfo", contentInfo)
                    .withClaim("currentTimeStamp", CurrentTime).withClaim("expireTimeStamp", PsignExpire)
                    .withClaim("urlAccessInfo", urlAccessInfo).sign(algorithm);
            System.out.println("token:" + token);
        } catch (JWTCreationException exception) {
            // Invalid Signing configuration / Couldn't convert Claims.
        }
    }
}

签名初始化的时机

TcPlayer初始化在遇到异步操作时可能会出现问题，比如获取不到组件之类的。这个时候可以考虑采用定时器进行操作。

// 初始化播放器
        setTimeout(() => {
                this.player=TCPlayer("player-container-id", {
                fileID: fileId, 
                appID: appID,  
                psign: psign,
                autoplay: false // 是否自动播放
                // 其他参数请在开发文档中查看
            })
        }, 2000)