前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >超级播放器tcplayer如何设置logo

超级播放器tcplayer如何设置logo

原创
作者头像
黑眼圈云豆
发布2020-09-14 15:38:36
3K0
发布2020-09-14 15:38:36
举报
文章被收录于专栏:跟铭哥学音视频技术

点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器,采用以 HTML5<video>为主,Flash 为辅的播放方式,在浏览器不支持 HTML5<video>的情况下采用 Flash 播放。播放器界面由 HTML CSS 实现,可以通过 CSS 定制界面。

步骤一:集成SDK

在合适的地方引入播放器样式文件与脚本文件:

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

如果在域名限制区域,可以引入以下链接:

代码语言:javascript
复制
<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频,需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
 <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
 <!--播放器脚本文件-->
 <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>

步骤二:设置播放器

进入旧版播放器设置页面

新建播放器并进行设置

设置播放器名称
设置播放器名称
设置logo
设置logo
设置贴片
设置贴片
控制台生成的播放器
控制台生成的播放器

关联播放器

选择要关联的视频
选择要关联的视频
关联播放器
关联播放器

设置成默认播放器的话,会进行默认关联

步骤三:初始化播放器

代码语言:javascript
复制
var player = TCPlayer('player-container-id', { // player-container-id 为播放器video标签 ID,必须与 html 中一致
    fileID: '', // 请传入需要播放的视频 filID(必须)
    appID: '' // 请传入点播账号的 appID(必须)
  });

步骤四:效果展示

效果图
效果图
logo的存在形式
logo的存在形式

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 步骤一:集成SDK
  • 步骤二:设置播放器
    • 进入旧版播放器设置页面
      • 新建播放器并进行设置
        • 关联播放器
        • 步骤三:初始化播放器
        • 步骤四:效果展示
        相关产品与服务
        云点播
        面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档