本文档将介绍适用于点播播放和直播播放的 Web 播放器 SDK （TCPlayer），它可快速与自有 Web 应用集成，实现视频播放功能。Web 播放器 SDK （TCPlayer）内默认包含部分 UI ，您可按需取用。
概述
Web 播放器是通过 HTML5 的
<video> 标签以及 Flash 实现视频播放。在浏览器不支持视频播放的情况下，实现了视频播放效果的多平台统一体验，并结合腾讯云点播视频服务，提供防盗链和播放 HLS 普通加密视频等功能。协议支持
音视频协议 | 用途 | URL 地址格式 | PC 浏览器 | 移动浏览器 |
MP3 | 音频 | http://xxx.vod.myqcloud.com/xxx.mp3 | 支持 | 支持 |
MP4 | 点播 | http://xxx.vod.myqcloud.com/xxx.mp4 | 支持 | 支持 |
HLS（M3U8） | 直播 | http://xxx.liveplay.myqcloud.com/xxx.m3u8 | 支持 | 支持 |
| 点播 | http://xxx.vod.myqcloud.com/xxx.m3u8 | 支持 | 支持 |
FLV | 直播 | http://xxx.liveplay.myqcloud.com/xxx.flv | 支持 | 部分支持 |
| 点播 | http://xxx.vod.myqcloud.com/xxx.flv | 支持 | 部分支持 |
WebRTC | 直播 | webrtc://xxx.liveplay.myqcloud.com/live/xxx | 支持 | 支持 |
说明：
视频编码格式仅支持 H.264 编码。
播放器兼容常见的浏览器，播放器内部会自动区分平台，并使用最优的播放方案。
HLS、FLV 视频在部分浏览器环境播放需要依赖 Media Source Extensions。
在不支持 WebRTC 的浏览器环境，传入播放器的 WebRTC 地址会自动进行协议转换来更好的支持媒体播放。
功能支持
功能\\浏览器 | Chrome | Firefox | Edge | QQ 浏览器 | Mac Safari | iOS Safari | 微信 | Android Chrome | IE 11 |
播放器尺寸设置 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
续播功能 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
倍速播放 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
缩略图预览 | ✓ | ✓ | ✓ | ✓ | - | - | - | - | ✓ |
切换 fileID 播放 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
镜像功能 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
进度条标记 | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ |
HLS 自适应码率 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Referer 防盗链 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ |
清晰度切换提示 | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ |
试看功能 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
HLS 标准加密播放 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
HLS 私有加密播放 | ✓ | ✓ | ✓ | - | - | - | Android：✓ iOS: - | ✓ | ✓ |
视频统计信息 | ✓ | ✓ | ✓ | ✓ | - | - | - | - | - |
视频数据监控 | ✓ | ✓ | ✓ | ✓ | - | - | - | - | - |
自定义提示文案 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
自定义UI | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
弹幕 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
水印 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
幽灵水印 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
视频列表 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
弱网追帧 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
说明：
视频编码格式仅支持 H.264 编码。
Chrome、Firefox 包括 Windows、macOS 平台。
Chrome、Firefox、Edge 及 QQ 浏览器播放 HLS 需要加载
hls.js。Referer 防盗链功能是基于 HTTP 请求头的 Referer 字段实现的，部分 Android 浏览器发起的 HTTP 请求不会携带 Referer 字段。
播放器兼容常见的浏览器，播放器内部会自动区分平台，并使用最优的播放方案。例如：在 Chrome 等现代浏览器中优先使用 HTML5 技术实现视频播放，而手机浏览器上会使用 HTML5 技术或者浏览器内核能力实现视频播放。
准备工作
播放器 SDK Web端（TCPlayer）自 5.0.0 版本起需获取 License 授权后方可使用。若您无需使用新增的高级功能，可直接申请基础版 License 以继续免费使用 TCPlayer；若您需要使用新增的高级功能则需购买高级版 License。具体信息如下：
说明：
1. 播放器 Web 端基础版 License 可免费申请，申请后有效期默认1年；在有效期剩余时间小于30天时，可免费续期。
2. 为方便本地开发，播放器不会校验 localhost 或者 127.0.01，因此申请 License 时不需要申请这类本地服务域名。
集成指引
通过以下步骤，您就可以在网页上添加一个视频播放器。
步骤1：在页面中引入文件
播放器 SDK 支持 cdn 和 npm 两种集成方式：
1. 通过 cdn 集成
在本地的项目工程内新建 index.html 文件，html 页面内引入播放器样式文件与脚本文件：
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/><!--播放器脚本文件--><script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
建议在使用播放器 SDK 的时候自行部署资源，单击下载播放器资源。部署解压后的文件夹，不能调整文件夹里面的目录，避免资源互相引用异常。
如果您部署的地址为
aaa.xxx.ccc，在合适的地方引入播放器样式文件与脚本文件，自行部署情况下，需要手动引用资源包文件夹 libs 下面的依赖文件，否则会默认请求腾讯云 cdn 文件。<link href="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="aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script><!--播放器脚本文件--><script src="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>
说明：
播放器容器必须为
<video> 标签。示例中的
player-container-id 为播放器容器的 ID，可自行设置。播放器容器区域的尺寸，建议通过 CSS 进行设置，通过 CSS 设置比属性设置更灵活，可以实现例如铺满全屏、容器自适应等效果。
示例中的
preload 属性规定是否在页面加载后载入视频，通常为了更快的播放视频，会设置为 auto，其他可选值：meta（当页面加载后只载入元数据），none（当页面加载后不载入视频），移动端由于系统限制不会自动加载视频。playsinline 和 webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用。设置
x5-playsinline 属性在 TBS 内核会使用 X5 UI 的播放器。步骤3：播放器初始化
页面初始化后，即可播放视频资源。播放器同时支持点播和直播两种播放场景，具体播放方式如下：
点播播放：播放器可以通过 FileID 播放腾讯云点播媒体资源，云点播具体流程请参见 使用播放器播放 文档。
直播播放：播放器通过传入 URL 地址，即可拉取直播音视频流进行直播播放。腾讯云直播 URL 生成方式可参见 自主拼装直播 URL。
在页面初始化之后，调用播放器实例上的方法，将 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 播放地址
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/42436psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',licenseUrl: 'license/url', // 参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl});
注意：
要播放的视频建议使用腾讯云转码，原始视频无法保证在浏览器中正常播放。
