草莓播放器 · 腾讯云播放器（TCPlayer）

本篇介绍草莓播放器中的 腾讯云播放器（TCPlayer）方案，基于腾讯云 TCPlayer 4.9.1 + Hls.js。

原出处

TCPlayer 是腾讯云推出的 Web 播放器，覆盖点播与直播，兼容多方协议。本项目在其官方资源（tcplayer.v4.9.1.min.js、tcplayer.min.css、audioTrack.png）基础上本地化到 tc/ 目录，并补充 hls.min.js 以便 Chrome/Firefox 播放 m3u8。

项目：TCPlayer（腾讯云 Web 播放器）https://cloud.tencent.com/document/product/881/20218
版本：v4.9.1

修改说明

参数入口：读取 ?url=，缺失时给出提示。
多协议自动识别：sources: [{ src, type: '' }] 交由 TCPlayer 自动识别 mp4/m3u8/flv。
HLS 能力：单独引入 hls.min.js（Chrome/Firefox 不原生支持 m3u8，TCPlayer 可借助 libs 或该库）。
点播模式：isVod: true、preload: 'auto'、playsinline，控制栏不自动隐藏 autoHide: false。
倍速：playbackRates: [0.75, 1, 1.25, 1.5, 2]。
状态机：ready / play 隐藏加载提示；error 显示失败遮罩；初始化异常兜底。

实现效果

腾讯云经典皮肤，点播 + 直播双模式
兼容 MP4 / HLS（m3u8）/ FLV / WebRTC（依版本与解码）
多档位倍速、全屏、内联播放
加载/失败状态清晰管理

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/tc/?url=视频地址

TCPlayer 适合使用腾讯云视频服务的场景；对通用 m3u8/mp4 也能良好播放，全屏与倍速体验成熟。

部署教程

本文参考腾讯云官方「Web 播放器」文档编写，以腾讯云 TCPlayer 官网标准的 CDN 引入方式部署，无需额外后端，静态托管即可播放。

官方文档：https://cloud.tencent.com/document/product/881
TCPlayer 设置：https://cloud.tencent.com/document/product/881/20218

1. 引入资源

在页面 <head> 中从腾讯云官方 imgcache CDN 引入 TCPlayer 的 JS 与 CSS：

1
2
<link href="https://imgcache.qq.com/qcloud/tcplayer/4.9.1/tcplayer.min.css" rel="stylesheet">
<script src="https://imgcache.qq.com/qcloud/tcplayer/4.9.1/tcplayer.min.js"></script>

若需在 Chrome / Firefox 中播放 HLS（m3u8）流，还需额外引入 hls.js：

1
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>

2. 页面容器

按照官方约定，在页面中使用 <video> 元素作为播放器容器：

1
<video id="player-container-id" playsinline webkit-playsinline></video>

3. 初始化播放器

调用全局 TCPlayer() 并传入配置。sources 数组中的 src 即为播放地址，支持 mp4 / m3u8 / flv 等格式；点播请设 isVod: true，直播请设 isVod: false：

1
2
3
4
5
6
var player = TCPlayer('player-container-id', {
    sources: [{ src: 'https://xxx/demo.mp4' }],   // 播放地址（mp4/m3u8/flv）
    isVod: true,       // 点播（false 为直播）
    autoplay: true,
    // ... 其余配置项参见官网文档
});

说明：云点播等完整能力依赖腾讯云账号，站外或未开通云点播场景下以基础点播播放为主。

4. 用 `?url=` 传参的最小示例

可通过 GET 参数动态传入播放地址，实现「一个页面多种资源」的用法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<link href="https://imgcache.qq.com/qcloud/tcplayer/4.9.1/tcplayer.min.css" rel="stylesheet">
<script src="https://imgcache.qq.com/qcloud/tcplayer/4.9.1/tcplayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
<video id="player-container-id" playsinline webkit-playsinline></video>
<script>
  var url = new URLSearchParams(location.search).get('url') || 'https://xxx/demo.mp4';
  var player = TCPlayer('player-container-id', {
    sources: [{ src: url }],   // 从 ?url= 动态传入播放地址
    isVod: true,
    autoplay: true
  });
</script>

5. 下载文件、部署到自己网站

上面的资源引入用于快速体验；若要把腾讯播放器 下载文件并在自己的网站部署：

需要下载哪些文件：播放 MP4 只需核心 tcplayer.min.js（官方构建产物），配套样式可选。CDN 镜像可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/tcplayer@0.0.30/dist/tcplayer.min.js
- 可选皮肤样式：tcplayer.min.css（如需默认皮肤建议一并下载）
放到网站目录：在站点根目录新建 tc/ 文件夹，把所需文件放进去。

本地引用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<link rel="stylesheet" href="./tc/tcplayer.min.css">
<script src="./tc/tcplayer.min.js"></script>
<video id="player" playsinline webkit-playsinline x5-playsinline></video>
<script>
new TCPlayer('player', {
  fileID: '视频 ID',       // 如需使用 fileID 播放请按需配置
  url: new URLSearchParams(location.search).get('url'),   // 直接 url 播放
  appID: '您的 appID',
});
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、EdgeOne Pages、GitHub Pages 等），无需后端：
```
https://你的域名/tc/?url=视频地址
```

说明：TCPlayer 由腾讯云点播提供，完整的 AppID/fileID、HLS、DRM、试看、防盗链等能力需要腾讯云账号并开通云点播才能使用。上面“下载文件”的自托管方式，适合用 url 参数直接播放的自有直链视频（基础点播场景无需后端）；需云能力时请按腾讯云官方接入文档完成 AppID 申请与签名鉴权。

原出处