TCSuperPlayer

概述

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

本模块支持 AVM 方式打开。通过 AVM 标签方式打开的模块，在 js 代码中需要通过 document.getElementById 的形式获取该模块实例对象然后进行其它逻辑的操作。否则会产生莫名其妙的问题。

该模块同时也支持 api.require 方式调用，通过 configView 接口相当于 AVM 的标签打开了一个视频播放区域的 frame（view）模块，用户点击全屏按钮后，模块自动代码一个 window 来全屏播放视频。

本模块支持 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
}

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

获取指定位置缩略图

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 系统，Android 系统

可提供的 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 及更高版本

APICloud

模块开发

端API

设备访问

功能扩展

界面布局

导航菜单

开放SDK

云服务对接

小程序模块

AVM多端模块

H5模块

前端框架

云API

技术专题

开发工具

下载

微信公众号适配

七天培训课教程

其他

Faq

开放平台接入指南

自定义加速域名

云主机

入门教程

部署与管理

常见FAQ

TCSuperPlayer

概述

关于小窗播放功能

模块接口

configPlayerView

params

示例代码

可用性

resizePlayerView

params

示例代码

可用性

hidePlayerView

示例代码

可用性

showPlayerView

示例代码

可用性

initPlayer

示例代码

可用性

closePlayer

示例代码

可用性

playWithUrl

params

示例代码

可用性

playWithTCloud

params

示例代码

可用性

setPlayerFullScreen

示例代码

可用性

addPlayerListener

callback

示例代码

可用性

resetPlayer

示例代码

可用性

resumePlayer

示例代码

可用性

pausePlayer

示例代码

可用性

seekToTime

params

示例代码

可用性

setKeyFrameDescList