TCSuperPlayer

立即使用

概述

概述

模块封装了腾讯的超级视频播放器。腾讯超级播放器是基于腾讯移动端视频播放器 SDK(TXLiteAVSDK_Player)进一步封装而来的。它进一步集成了视频播放器常用播放、暂停、切换清晰度等功能,该超级播放器自带一套完整的 UI, 其效果如模块商店运行截图所示。关于腾讯视频播放器的架构,轻参考 腾讯官方文档

本模块支持 RTMP、FLV、HLS、MP4 等丰富的音视频格式。

关于小窗播放功能

可以通过playFenestrule 接口开启小窗播放模式,此时可以调 hidePlayerView 接口隐藏普通播放模式的播放器。addFenestruleListener 接口可以监听用点击小窗播放器,在回调里可以调 backFramePlay 接口回到普通播放模式,之后可以再通过 backFenestrulePlay 恢复小窗播放。若用户在小窗播放时点击了关闭按钮,则在相应回调里调用closeFenestrulePlay关闭小窗,同时调用 closePlayer 关闭播放器。

关于后台播放功能

如需支持后台播放功能请参考 config.xml 配置说明文档里关于 BackgroundMode 的配置

配置实例如下:

<preference name="backgroundMode" value="audio"/>

注意:1.0.9版(原生SDK 10.1版本)本开始增加授权校验,详情参考腾讯文档

模块接口

setLicence

设置验证

setLicence({params})

params

licenceURL:

  • 类型:字符串
  • 描述:腾讯直播平台申请的 url

licenceKey:

  • 类型:字符串
  • 描述:腾讯直播平台申请的 key

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.setLicence({
  licenceURL:'',
  licenceKey:''
})

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

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,显示

isShowPipBtn:

  • 类型:布尔类型
  • 描述:(可选项)非全屏状态下是否显示画中画按钮,仅支持iOS端
  • 默认:true,显示

isShowWindowLayoutTop

  • 类型:布尔类型
  • 描述:(可选项)半屏状态下是否显示播放区域顶部导航条
  • 默认:true

isShowBackBtn

  • 类型:布尔类型
  • 描述:(可选项)半屏状态下是否显示播放区域顶部返回按钮,返回按钮在顶部导航条内的布局中
  • 默认: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:''        //字符串类型;视频资源地址
}

dynamicWaterConfig:

  • 类型:JSON对象
  • 描述:动态水印相关配置,不设置此参数则不显示动态水印
  • 内部字段:
{
   tipText:'',     //字符串类型;动态水印文本内容
   tipTextSize:,   //数字类型;动态水印字体大小 默认30
   tipTextColor:'' //字符串类型;动态水印字体颜色 默认'#80FFFFFF'
}

示例代码

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:

  • 类型:字符串
  • 描述:(可选项)防盗链签名,若不传表示播放非防盗链视频资源

dynamicWaterConfig:

  • 类型:JSON对象
  • 描述:动态水印相关配置,不设置此参数则不显示动态水印
  • 内部字段:
{
   tipText:'',     //字符串类型;动态水印文本内容
   tipTextSize:,   //数字类型;动态水印字体大小 默认30
   tipTextColor:'' //字符串类型;动态水印字体颜色 默认'#80FFFFFF'
}

示例代码

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 及更高版本

addDownLoadListener

添加下载监听

addDownLoadListener(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:小窗事件回调
  • 内部字段:
{
   eventType:''     //字符串类型;交互事件类型;取值范围:
                    //downloadStart:开始下载
                    //downloadProgress:下载中
                    //downloadStop:停止下载
                    //downloadFinish:下载完成
                    //downloadError:下载失败
  downloadMediaInfo:''   //JSON对象,返回下载的信息;            
}

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.addDownLoadListener(function(ret){
});

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

startDownLoad

开始下载,开始下载有 URL 和 Fileid 两种方式。如果传了url就以url方式下载,Fileid方式需要appId、fileId

startDownLoad({params})

params

url:

  • 类型:字符串
  • 描述:视频url地址

appId:

  • 类型:字符串
  • 描述:AppId 用于腾讯云点播 File ID 播放及腾讯云直播时移功能

fileId:

  • 类型:字符串
  • 描述:云点播 File ID

psign:

  • 类型:字符串
  • 描述:(可选项)防盗链签名,若不传表示播放非防盗链视频资源

quality:

  • 类型:字符串
  • 描述:(可选项) 下载清晰度,
  • 默认:od
  • 取值范围:
    • od:原画
    • flu:流畅
    • sd:标清
    • hd:高清

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.startDownLoad({
    appId:'',
    fileId:''
})

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

stopDownload

停止下载视频,执行结果会在下载监听中的eventType为downloadStop回调

stopDownload({params})

params

downloadMediaInfo:

  • 类型:JSONObject
  • 描述:下载监听中返回的downloadMediaInfo对象

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.stopDownload({
    downloadMediaInfo:
});

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

deleteDownloadFile

删除下载视频

deleteDownloadFile({params},callback(ret))

params

downloadMediaInfo:

  • 类型:JSONObject
  • 描述:下载监听中返回的downloadMediaInfo对象

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回值
{
   stutus:      //布尔类型;是否删除成功
}

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.deleteDownloadFile({
    downloadMediaInfo:''
},function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

getDownloadList

获取下载列表

getDownloadList(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:小窗事件回调
  • 内部字段:
{
  downloadInfoList:''   //返回下载的列表信息,downloadMediaInfo对象的JSON数组

}

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.getDownloadList(function(ret){
});

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本

isShowDynamicWater

是否显示动态水印;在playWithUrl或playWithTCloud中设置dynamicWaterConfig才会显示动态水印

isShowDynamicWater({params})

params

isShow:

  • 类型:布尔类型
  • 描述:是否显示,true:显示;false:隐藏
  • 默认:false

示例代码

var TCSuperPlayer = api.require('TCSuperPlayer');
TCSuperPlayer.isShowDynamicWater({
     isShow:false
});

可用性

iOS 系统,Android 系统

可提供的 1.0.8 及更高版本