播放器 SDK TCPlayer 集成指引（Web）

一、概述

Web 播放器是通过 HTML5 的 <video> 标签以及 Flash 实现视频播放。在浏览器不支持视频播放的情况下，实现了视频播放效果的多平台统一体验，并结合腾讯云点播视频服务，提供防盗链和播放 HLS 普通加密视频等功能。

二、协议支持

注意：说明：

三、功能支持

注意：说明：

播放器兼容常见的浏览器，播放器内部会自动区分平台，并使用最优的播放方案。例如：在 Chrome 等现代浏览器中优先使用 HTML5 技术实现视频播放，而手机浏览器上会使用 HTML5 技术或者浏览器内核能力实现视频播放。

四、准备工作

播放器 SDK Web 端（TCPlayer）自 5.0.0 版本起需获取 License 授权后方可使用。若你无需使用新增的高级功能，可直接申请基础版 License 以继续免费使用 TCPlayer；若你需要使用新增的高级功能则需购买高级版 License。具体信息如下：

注意：说明：

注意：播放器 Web 端基础版 License 可免费申请，申请后有效期默认1年；在有效期剩余时间小于30天时，可免费续期。

五、集成指引

通过以下步骤，你就可以在网页上添加一个视频播放器。

六、步骤1：在页面中引入文件

播放器 SDK 支持 cdn 和 npm 两种集成方式：

七、1. 通过 cdn 集成

建议在使用播放器 SDK 的时候自行部署资源，单击下载播放器资源。部署解压后的文件夹，不能调整文件夹里面的目录，避免资源互相引用异常。

如果你部署的地址为 aaa.xxx.ccc，在合适的地方引入播放器样式文件与脚这篇件，自行部署情况下，需要手动引用资源包文件夹 libs 下面的依赖文件，否则会默认请求腾讯云 cdn 文件。在 html 页面内引入播放器样式文件与脚这篇件：

<link href="https://aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/> <!–如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.m.js。–> <script src="https://aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script> <!–播放器脚这篇件–> <script src="https://aaa.xxx.ccc/tcplayer.vx.x.x.min.js"></script>

八、2. 通过 npm 集成

首先安装 tcplayer 的 npm 包：

npm install tcplayer.js

导入 SDK 和样式文件：

import TCPlayer from 'tcplayer.js';import 'tcplayer.js/dist/tcplayer.min.css';

九、步骤2：放置播放器容器

在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。

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

注意：说明：

十、步骤3：播放器初始化

页面初始化后，即可播放视频资源。播放器同时支持点播和直播两种播放场景，具体播放方式如下：

·点播播放：播放器可以通过 FileID 播放腾讯云点播媒体资源，云点播具体流程请参见 使用播放器播放 文档。

·直播播放：播放器通过传入 URL 地址，即可拉取直播音视频流进行直播播放。腾讯云直播 URL 生成方式可参见 自主拼装直播 URL。

通过 URL 播放（直播、点播）通过 FileID 播放（点播）在页面初始化之后，调用播放器实例上的方法，将 URL 地址传入方法。// player-container-id 为播放器容器 ID，必须与 html 中一致var player = TCPlayer('player-container-id', { sources: [{ src: 'path/to/video', // 播放地址 }], licenseUrl: 'license/url', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl});// player.src(url); // url 播放地址在 index.html 页面初始化的代码中加入以下初始化脚本，传入在准备工作中获取到的 fileID（媒资管理）中的视频 ID 与 appID（在账号信息>基本信息中查看）。var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致 fileID: '3701925921299637010', // 请传入需要播放的视频 fileID（必须） appID: '1500005696', // 请传入点播账号的 appID（必须） //必传 psign， psign 即播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436 psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI', licenseUrl: 'license/url', // 参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl});

注意：要播放的视频建议使用腾讯云转码，原始视频无法保证在浏览器中正常播放。

十一、步骤4: 更多功能

播放器可以结合云点播的服务端能力实现高级功能，比如自动切换自适应码流、预览视频缩略图、添加视频打点信息等。这些功能在 播放长视频方案 中有详细的说明，可以参考文档实现。

此外，播放器还提供更多其他功能，功能列表和使用方法请参见 功能展示 页面。