超级播放器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(必须)
});
步骤四:效果展示
- 读书笔记-JavaScript面向对象编程(三)
- 视频比特率与分辨率
- 译文 | 简明 TensorFlow 教程:所有的模型
- 基于 Ubuntu 搭建 VNC 远程桌面服务
- 搭建 FTP 文件服务
- linux平台下的写文件刷新
- MySQL NDB Cluster实战
- 译文 | 简明 TensorFlow 教程:混合模型
- 利用SetConsoleTextAttribute函数设置控制台颜色
- python笔记:#001#python简介
- python笔记:#002#第一个python程序
- python笔记:#003#PyCharm 的初始设置
- python笔记:#004#注释
- python笔记:#005#算数运算符
- 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 数组属性和方法
- 工具系列 | H5自定义视频播放器实现
- 前端系列 |原生JS和jQuery循环遍历函数
- 工具系列 | H5如何实现人脸识别
- 形式化分析工具(六):HLPSL Tutorial(Example3)
- CODING DevOps + Nginx-ingress 实现自动化灰度发布
- TF入门04-TF实现Word2Vec
- TF入门03-实现线性回归&逻辑回归
- TF入门02-TensorFlow Ops
- 前端|利用Verify插件实现前端图像验证码
- 3分钟短文 | PHP位运算和逻辑运算,一个符号写两遍这么简单?
- 打卡群刷题总结0721——搜索二维矩阵
- NumPy进阶80题完整版|附Notebook版本下载
- 【LeetCode每日一题】21. Merge Two Sorted Lists
- 计算广告笔记06-程序化交易广告
- TF入门05-实验过程管理