TCSuperPlayer
概述
概述
模块封装了腾讯的超级视频播放器。腾讯超级播放器是基于腾讯移动端视频播放器 SDK(TXLiteAVSDK_Player)进一步封装而来的。它进一步集成了视频播放器常用播放、暂停、切换清晰度等功能,该超级播放器自带一套完整的 UI, 其效果如模块商店运行截图所示。关于腾讯视频播放器的架构,轻参考 腾讯官方文档。
本模块支持 RTMP、FLV、HLS、MP4 等丰富的音视频格式。
关于小窗播放功能
可以通过playFenestrule 接口开启小窗播放模式,此时可以调 hidePlayerView 接口隐藏普通播放模式的播放器。addFenestruleListener 接口可以监听用点击小窗播放器,在回调里可以调 backFramePlay 接口回到普通播放模式,之后可以再通过 backFenestrulePlay 恢复小窗播放。若用户在小窗播放时点击了关闭按钮,则在相应回调里调用closeFenestrulePlay关闭小窗,同时调用 closePlayer 关闭播放器。
模块接口
configPlayerView
配置播放器视图。
注意:本接口仅支持引擎2.0方式调用。引擎3.0上可直接通过 mo-tcsuperplayer 标签配置使用播放器。
configPlayerView({params})
params
rect:
- 类型:JSON 类型
- 描述:(可选项)视频播放器的位置及大小
- 内部字段:
{
x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
w:300, //(可选项)数字类型;模块宽度(相对于所属的 Window 或 Frame;默认300
h:600 //(可选项)数字类型;模块高度(相对于所属的 Window 或 Frame;默认300
}
isShowDanmu:
- 类型:布尔类型
- 描述:(可选项)全屏状态下是否显示弹幕开关按钮,仅Android支持
- 默认:true,显示
isShowSnapshot:
- 类型:布尔类型
- 描述:(可选项)全屏状态下是否显示截屏按钮
- 默认:true,显示
isShowMoreButton:
- 类型:布尔类型
- 描述:(可选项)全屏状态下是否显示更多按钮
- 默认:true,显示
isShowWindowLayoutTop
- 类型:布尔类型
- 描述:(可选项)半屏状态下是否显示播放区域顶部导航条
- 默认:true
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块添加到指定 frame 的名字(只指 frame,传 window 无效)
- 默认:预览窗口依附于当前 window
fixed:
- 类型:布尔
- 描述:(可选项)预览窗口是否随所属 window 或 frame 滚动
- 默认值:true(不随之滚动)
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.configPlayerView({
rect:{
x:,
y:,
w:,
h:
},
fixedOn:'',
fixed:false
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
resizePlayerView
重设播放器位置和大小
注意:本接口仅对 configPlayerView 打开的播放器有效
resizePlayerView({params})
params
rect:
- 类型:JSON 类型
- 描述:(可选项)预览窗口的位置及大小
- 内部字段:
{
x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:原x坐标
y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:原y坐标
w:300, //(可选项)数字类型;模块宽度(相对于所属的 Window 或 Frame;默认300
h:600 //(可选项)数字类型;模块高度(相对于所属的 Window 或 Frame;默认300
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.resizePlayerView({
rect:{
x:,
y:,
w:,
h:
}
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
hidePlayerView
隐藏播放试图的 frame
hidePlayerView()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.hidePlayerView()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
showPlayerView
恢复显示播放试图的 frame
showPlayerView()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.showPlayerView()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
initPlayer
初始化播放器
initPlayer()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.initPlayer()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
closePlayer
关闭播放器。仅对引擎 2.0 方式打开的模块有效。通过 AVM 标签打开的播放器先调用pause接口暂停,然后前端代码自行隐藏即可。
closePlayer()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.closePlayer()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
playWithUrl
播放自定义视频
playWithUrl({params})
params
title:
- 类型:字符串
- 描述:视频标题
videoURL:
- 类型:字符串
- 描述:视频的URL,与 multiVideoURLs 互斥
multiVideoURLs:
- 类型:数组
- 描述:高清、标清、超清等视频资源组成的数组,与 videoURL 互斥
- 内部字段:
{
qualityName:'', //字符串类型;视频的清晰度,如:原画、标清、超清、一般、模糊
url:'' //字符串类型;视频资源地址
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.playWithUrl({
title: '',
videoURL:'http://af1fb2ef33ba36ebbfad.qiniucdn.apicloud-system.com/apicloud/1b99aa5822f858abd1da8b2bb8332055.MP4'
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
playWithTCloud
播放腾讯云视频
playWithTCloud({params})
params
title:
- 类型:字符串
- 描述:视频标题
appId:
- 类型:字符串
- 描述:AppId 用于腾讯云点播 File ID 播放及腾讯云直播时移功能
fileId:
- 类型:字符串
- 描述:云点播 File ID
psign:
- 类型:字符串
- 描述:(可选项)防盗链签名,若不传表示播放非防盗链视频资源
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.playWithTCloud({
title: '广告',
appId:1400329073,
fileId:'5285890799710670616'
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setPlayerFullScreen
全屏播放
setPlayerFullScreen()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setPlayerFullScreen()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
addPlayerListener
addPlayerListener()
事件监听
callback
ret:
- 类型:JSON对象
- 描述:返回值
{
eventType: '', //字符串类型;交互事件类型;取值范围:
//back:返回事件
//fullScreenChanged:全屏改变通知
//didStart:播放开始通知
//didEnd:播放结束通知
//error:播放发生错误
code:, //数字类型;错误码
why:'' //字符串类型;错误信息
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.addPlayerListener(function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
resetPlayer
重置player
resetPlayer()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.resetPlayer();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
resumePlayer
恢复播放
resumePlayer()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.resumePlayer();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
pausePlayer
暂停播放
pausePlayer()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.pausePlayer();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
seekToTime
跳转到指定位置播放
seekToTime({params})
params
toTime:
- 类型:数字
- 描述:跳转到指定位置,单位秒
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.seekToTime({
toTime:10
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setKeyFrameDescList
设置打点。在播放长视频时,打点信息有助于观众找到感兴趣的点。使用 修改媒体文件属性API,通过 AddKeyFrameDescs.N 参数可以为视频设置打点信息。调用后,播放器的界面会增加新的元素。
setKeyFrameDescList({params})
params
frameDescList:
- 类型:数组
- 描述:打点信息
- 内部字段:
[{
where:, //数字类型;打点位置(Android不支持)
time:, //数字类型;打点时间
text:'' //字符串类型;提示信息
},{},...]
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setKeyFrameDescList({
frameDescList:[{
where:10,
time:1,
text:'你笑起来真好看'
}]
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
getKeyFrameDescList
getKeyFrameDescList()
获取打点信息
callback
ret:
- 类型:JSON对象
- 描述:返回值
{
keyFrameDescList: [], //数组类型;
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getKeyFrameDescList(function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本 <!--
getThumbnail
获取指定位置缩略图,仅IOS支持
getThumbnail({params},callback(ret))
params
time:
- 类型:数字
- 描述:指定位置,单位秒
callback(ret)
ret:
- 类型:JSON对象
- 描述:返回值
{
status:, //布尔类型;是否获取成功
thumbnail: //字符串类型;缩略图路径
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getThumbnail({
time:10
},function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统
可提供的 1.0.0 及更高版本
-->
getPlayerState
getPlayerState()
获取播放状态
callback
ret:
- 类型:JSON对象
- 描述:返回值
{
state: '', //字符串类型;状态类型;取值范围:
//failed:播放失败
//buffering:正在缓冲
//playing:正在播放
//stopped:停止
//pause:暂停
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getPlayerState(function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setCoverImage
设置封面图
setCoverImage({params})
params
coverImage:
- 类型:字符串
- 描述:封面图本地路径
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setCoverImage({
coverImage:''
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setLoop
设置循环播放
setLoop({params})
params
loop:
- 类型:布尔
- 描述:是否循环播放
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setLoop({
loop:true
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setStartTime
起始播放时间,用于从上次位置开播
setStartTime({params})
params
startTime:
- 类型:数字
- 描述:播放位置
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setStartTime({
startTime:10
})
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
getPlayDuration
getPlayDuration()
获取播放总时长
callback
ret:
- 类型:JSON对象
- 描述:返回值
{
playDuration: //数字类型;总时长;
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getPlayDuration(function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
getCurrentTime
getCurrentTime()
获取当前播放位置
callback
ret:
- 类型:JSON对象
- 描述:返回值
{
currentTime: //数字类型;当前播放位置;
}
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getCurrentTime(function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
playFenestrule
开启小窗(浮动窗)播放模式
playFenestrule())
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.playFenestrule()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
backFenestrulePlay
从普通播放模式切换到小窗播放模式
backFenestrulePlay())
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.backFenestrulePlay()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
backFramePlay
从小窗播放模式切换回普通播放模式
backFramePlay())
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.backFramePlay()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
closeFenestrulePlay
关闭小窗(浮动窗)播放模式
closeFenestrulePlay())
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.closeFenestrulePlay()
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
addFenestruleListener
添加小窗播放的相关事件监听
addFenestruleListener(callback(ret))
callback(ret)
ret:
- 类型:JSON对象
- 描述:小窗事件回调
- 内部字段:
{
eventType:'' //字符串类型;交互事件类型;取值范围:
//click:用户点击小窗
//close:用户点击关闭按钮
}
示例代码
var SuperPlayer = api.require('TCSuperPlayer');
SuperPlayer.addFenestruleListener(function(ret){
if(ret.eventType == 'close') {
SuperPlayer.closeFenestrulePlay();
} else {
SuperPlayer.backFramePlay();
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
hideDanmu
隐藏全屏播放时的弹幕按钮,仅Android支持
hideDanmu()
示例代码
var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.hideDanmu()
可用性
Android 系统
可提供的 1.0.1 及更高版本