腾讯云点播播放器TCPlayer开发文档整理edusoho

最新推荐文章于 2026-04-24 02:03:04 发布

原创

最新推荐文章于 2026-04-24 02:03:04 发布 · 5.5k 阅读

收录于

本文档详细介绍了腾讯云点播播放器TCPlayer的使用，包括播放器初始化、续播功能的开启、倍速播放的调用、切换fileID播放、HLS自适应码率播放以及防盗链设置等关键功能。通过示例代码和实际操作演示，帮助开发者更好地集成和定制播放器。

首先在你的页面中引入css、js文件

<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，
 需要在 tcplayer.v4.min.js 之前引入 hls.js。-->
 <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js">
 </script>
 <!--播放器脚本文件-->
 <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js">
 </script>

播放器初始化需要传入两个参

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

???? ??? Frank

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

TcPlayer-2.3.2.js

03-11

tcplayer视频播放器js

参与评论您还未登录，请先登录后发表或查看评论

TcPlayer-2.4.1.zip

11-25

JS视频播放器

h5集成腾讯云播放器tcplayer遇到的坑

gw6601的博客

06-12

1635

需要注意的是，腾讯云播放器使用了video标签，在全屏状态下,会新建图层位于最高级别，需要获取图层标签，动态添加按钮和标题。1、腾讯云播放器没有提供Controls的显示/隐藏监听，需要自己添加监听事件。3、根据控制栏联动播放器顶部标题和返回按钮。2、根据控制栏动态显示倍速提示框。

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

qq_52157198的博客

04-18

2272

官方文档：https://cloud.tencent.com/document/product/881/77877。TcPlayer初始化在遇到异步操作时可能会出现问题，比如获取不到组件之类的。这个时候可以考虑采用定时器进行操作。不过该实例是静态的，可以稍作修改，将fileId、appId等作为参数传入，动态获取签名。是播放器派发的签名，需要先得到签名才可以播放。官方的产品文档提供了签名获取的实例代码，稍作。上面是播放器初始化的代码，其中，

手把手教你用腾讯云TCPlayer搭建WebRTC直播播放页（支持H5/Android/iOS全平台）

最新发布

weixin_30482181的博客

04-24

352

本文详细介绍了如何使用腾讯云TCPlayer搭建WebRTC直播播放页，支持H5、Android和iOS全平台。通过智能协议切换和硬件加速技术，实现毫秒级低延迟直播，适用于电商、在线教育等场景。文章包含从环境准备到实战代码的完整指南，帮助开发者快速集成和优化WebRTC直播方案。

【Vue2 + TCPlayer】实现视频云点播功能

weixin_47375144的博客

12-20

5118

使用：腾讯云，本文基于VUE 需求：利用云点播制作视频文档：https://cloud.tencent.com/document/product/266/58772 demo: https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/build/index.html 步骤： 1.在页面中引入文件 (1) 先下载 js 文件，将文件放入到该项目中合适的位置然后将该 js 文件引入到 .vue

tcplayer播放实时视频流

weixin_46352558的博客

12-23

3704

代码实例， urlAddress是父组件传来的视频流地址，也有可用的网上找的视频流地址为注释的source。也可以全局引入在index.html，全局引入文件我是放在public下面的。样式的话需要在main.js引用下图的tcplayer.min.css。js依赖文件是在官网下载的。

vue3中TCplayer应用

jiangliuhuan123的博客

08-30

1706

环境win10:vite+vue3+elementUI 2 使用 license 问题 licenseUrl: ‘https://license.vod2.myqcloud.com/license/v2/1310752424_1/v_cube.license’’ 代码里面的是我自己免费申请的.时长14天. 这个东西是8.16更新的时候加的免费申请web License 链接下面是sdk的更新日志: https://cloud.tencent.com/document/product/881/20204

tcplayer在vue3中的应用

qq_68262470的博客

03-08

2056

腾讯的视频播放sdk在前端和后端的应用，以及各个版本出现的问题

TCPlayer中的fakeFullscreen参数详解

weixin_42766526的博客

07-29

952

fakeFullscreen 是 TCPlayer 中的一个配置参数，它决定了播放器是否使用伪全屏模式。伪全屏模式是指视频播放器在视觉上覆盖整个浏览器窗口，但并不使用浏览器的原生全屏 API。这种模式下，播放器实际上并未真正进入全屏状态，而是通过 CSS 和 JavaScript 技术模拟全屏效果

移动端视频播放TCPlayer

香蕉你个芭呐呐的博客

01-19

4269

腾讯云 Web 超级播放器 TCPlayerLite官网链接 Web 端超级播放器基于 video.js 框架开发，采用以 HTML5<video>为主 Flash 为辅的播放方式，在浏览器不支持HTML5<video>的情况下采用 Flash 播放。播放器界面由 HTML CSS 实现，可以通过 CSS 定制界面。根据官网api设置配置参数；一些特殊兼容总...

Web Player TcPlayer

kangmingyaner的博客

01-08

4217

Web Player TcPlayer 概述 tcplayer lite主要用于在手机浏览器和PC浏览器中播放音频/视频流。使用该播放器，您可以在微信时刻和微博等社交平台上共享视频，而无需安装其他应用程序。本文档面向具有JavaScript基本知识的开发人员。基础入门前必须学习的基本知识: LVB和VOD 实时生成LVB视频源。一旦VJ停止广播，LVB URL就变得无效，并且由于实时播放实时流，因此在播放期间播放器上不显示任何进度条。 VOD视频源是服务器上的一个文件，只要未被提供商删除，就可

使用腾讯云视频流报错 TCPlayer: ERROR: (CODE:52 undefined)

2301_76781173的博客

06-11

3388

【代码】使用腾讯云视频流报错 TCPlayer: ERROR: (CODE:52 undefined)

腾讯云播放器更新——TCplayer

weixin_30746117的博客

06-11

1502

概述最近腾讯云播放器进行了更新，增加了TCplayer，支持点播播放。由于工作需要，了解了一下TCplayer，把心得记录下来，供以后开发时参考，相信对其他人也有用。参考文档： TCPlayer开发文档 TCPlayer使用文档 TCplayer TCplayer可以播放发布在腾讯云点播中的视频。所以要先上传视频到腾讯云点播，然后它会给你一个fileID和appID。前端就利用这个fileID...

使用腾讯提供的TCPlayer 播放器，配合云点播是报的Cannot read properties of null (reading ‘nodeName‘)

motoudi的博客

01-03

1779

之所以报这个错误，我看了看源码是因为，TCPlayer没有拿到我们的video 这个标签元素，再结合vue的特性，那就应该是我们的vue DOM还没加载完成，TCPlayer 他就去拿了，这就导致报错。在 vue 中引入腾讯视频，原则是先加载腾讯视频代码 → 加载 dom → 加载视频初始化代码，然后结合我写的代码，我发现，我对video进行循环了，所以才一直报错，我操，服了。这玩意，还是得根据具体情况去具体分析的，这解决办法反正是能解决我的问题。下面是怎么使用TCPlayer在vue中。

uniapp 做点播，用的是腾讯的tcplayer（原理基本上和 vue 一样，区别在于 uniapp 不能直接引用 video 标签，得动态创建）网页版

nelly521的博客

09-25

2029

uniapp 做点播，用的是腾讯的tcplayer（原理基本上和 vue 一样，区别在于 uniapp 不能直接引用 video 标签，得动态创建）console.log("js资源加载成功了");console.log("js资源加载失败了");// 创建script标签，引入外部文件。// sdk引入有顺序。--播放器脚本文件-->

TCPlayer: ...is already initialised. Options will not be applied

hql1439493352的博客

05-30

2920

引入了腾讯云播放器做监控和视频点播功能，需求所致需要存在多个可播放的video，这便出现了一个video多次初始化的问题。解决：在合适的位置写下（如页面销毁时或者关闭弹窗时等等） player.dispose() //销毁； ...

腾讯云 Web 超级播放器开发实战

初九之潜龙勿用

05-28

6654

腾讯云 Web 超级播放器 TCPlayer可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要解决了以下问题：1、增加、集成了播放快进组件 2、更改了一些样式 3、增强了一些旧版手机的兼容性

TcPlayer在微信内自动播放video

zgwnDong的博客

10-24

2106

微信ios自动播放 let _this = this; this.$nextTick(function () { let videoDom = document.querySelector("video") let video= _this.$refs.videoPlayer; if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function"){ We