超级播放器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>
步骤二:设置播放器
进入旧版播放器设置页面
新建播放器并进行设置
关联播放器
设置成默认播放器的话,会进行默认关联
步骤三:初始化播放器
var player = TCPlayer('player-container-id', { // player-container-id 为播放器video标签 ID,必须与 html 中一致
fileID: '', // 请传入需要播放的视频 filID(必须)
appID: '' // 请传入点播账号的 appID(必须)
});
步骤四:效果展示
- ASP.NET MVC编程——模型
- ASP.NET MVC编程——验证、授权与安全
- 如何使用SAML配置CDSW的身份验证
- ASP.NET MVC编程——控制器
- ASP.NET MVC编程——视图
- 设计原则
- Entity Framework——配置文件设置
- 如何安装SAS并配置连接Hive/Impala
- Entity Framework——记录执行的命令信息
- 【BlackHat 2017 议题剖析】连接的力量:GitHub 企业版漏洞攻击链构造之旅
- CVE-2015-1641 Word 利用样本分析
- Cloudera Navigator介绍与安装
- [LeetCode]String主题系列{第5,6题}
- CDH内存调拨过度警告分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法