开发指南

服务端 API 文档

诚邀爱技术、爱分享的你,成为文档内容共建者> HOT
本文档将介绍适用于点播播放和直播播放的 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 技术或者浏览器内核能力实现视频播放。

集成指引

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

步骤1:在页面中引入文件

在本地的项目工程内新建 index.html 文件,html 页面内引入播放器样式文件与脚本文件:
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css" rel="stylesheet"/>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频,需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
<!--有些浏览器环境不支持 Webrtc,播放器会将 Webrtc 流地址自动转换为 HLS 格式地址,因此快直播场景同样需要引入 hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/TXLivePlayer-1.2.3.min.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频,需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/hls.min.1.1.6.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频,需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频,需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
建议在使用播放器 SDK 的时候自行部署资源,单击下载播放器资源。 部署解压后的文件夹,不能调整文件夹里面的目录,避免资源互相引用异常。 如果您部署的地址为aaa.xxx.ccc,在合适的地方引入播放器样式文件与脚本文件:
<link href="aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/>
<!--如果需要在 ChromeFirefox 等现代浏览器中通过 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:放置播放器容器

在需要展示播放器的页面位置加入播放器容器。例如,在 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(当页面加载后不载入视频),移动端由于系统限制不会自动加载视频。
playsinlinewebkit-playsinline这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放,此处仅作示例,请按需使用。
设置x5-playsinline属性在 TBS 内核会使用 X5 UI 的播放器。

步骤3:播放器初始化

页面初始化后,即可播放视频资源。播放器同时支持点播和直播两种播放场景,具体播放方式如下:
点播播放:播放器可以通过 FileID 播放腾讯云点播媒体资源,云点播具体流程请参见 使用播放器播放 > 接入指引 文档。
直播播放:播放器通过传入 URL 地址,即可拉取直播音视频流进行直播播放。腾讯云直播 URL 生成方式可参见 自主拼装直播 URL
通过 URL 播放(直播、点播)
通过 FileID 播放(点播)
在页面初始化之后,调用播放器实例上的方法,将 URL 地址传入方法。
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID,必须与 html 中一致
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',
});

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

步骤4: 更多功能

播放器可以结合云点播的服务端能力实现高级功能,例如自动切换自适应码流、预览视频缩略图、添加视频打点信息等。这些功能在 播放长视频方案 中有详细的说明,可以参考文档实现。
此外,播放器还提供更多其他功能,功能列表和使用方法请参见 功能展示 页面。
目录