超级播放器tcplayer如何设置logo

时间:2022-07-24
本文章向大家介绍超级播放器tcplayer如何设置logo,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

步骤一:集成SDK

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

<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>

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

<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
设置贴片
控制台生成的播放器

关联播放器

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

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

步骤三:初始化播放器

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

步骤四:效果展示

效果图
logo的存在形式