超级播放器tcplayer如何设置logo

原创

黑眼圈云豆

发布于 2020-09-14 07:38:36

3.1K00

代码可运行

文章被收录于专栏：跟铭哥学音视频技术跟铭哥学音视频技术

运行总次数：0

代码可运行

点播超级播放器是基于 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>

步骤二：设置播放器

进入旧版播放器设置页面

新建播放器并进行设置

关联播放器

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

步骤三：初始化播放器

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