腾讯视频通用播放器

当前版本:V2 最近更新:2015-01-01 组件维护:腾讯视频相关人员

官方调用腾讯视频js代码是这样的:代码自动生成工具   调用详细参数

组件说明

腾讯视频通用播放器是一个使用JS封装好的web端视频播放器框架,提供视频播放的基础API,方便调用方在任意网页嵌入腾讯平台的视频或者网络直播。能够自动兼容PC和移动设备,PC端默认使用flash,ios移动设备使用HTML5技术,能兼容windows、mac、linux系统,兼容IE6\7\8,QQ浏览器、TT浏览器、遨游、Firefox、safari、opera、chrome等主流浏览器。

点播-JS调用方法

  • 必须引入腾讯视频播放器JS
  • 创建tvp.VideoInfo类(待播放的视频信息)的对象实例,并传入视频vid或者直播频道id。
  • 创建tvp.Player类(播放器信息)的对象实例。
  • 通过播放器对象实例的create接口设置输出目标容器ID和播放器的属性

HTML代码

<div id="mod_player"></div>

JS代码

<script src="http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8"></script>
<script type="text/javascript">
var video = new tvp.VideoInfo();
video.setVid("i001216370f");
var player =new tvp.Player();
player.create({
    width:480,
    height:360,
    video:video,
    modId:"mod_player", //mod_player是刚刚在页面添加的div容器
    autoplay:true
});
</script>

DEMO演示

查看演示

点播-iframe调用方法

如果你要引用腾讯视频的点播播放器,又不方便使用JS代码,那么可以使用iframe的方式嵌入简版的播放器页面 URL:http://v.qq.com/iframe/player.html

vid 必填,点播视频的vid
width 播放器宽度,单位像素,不填则默认自适应iframe宽度
height 播放器高度,单位像素,不填则默认自适应iframe高度
auto 选填,是否自动播放,参数可选1或者0,默认是1
tiny 选填,是否使用简版的控制栏,参数可选1或者0,默认是1

例如:http://v.qq.com/iframe/player.html?vid=q00122se3yj&tiny=0

DEMO演示

查看演示

直播-JS调用方法

  • 必须引入腾讯视频播放器JS
  • 创建tvp.VideoInfo类(待播放的视频信息)的对象实例,并传入视频vid或者直播频道id。
  • 创建tvp.Player类(播放器信息)的对象实例。
  • 通过播放器对象实例的create接口设置输出目标容器ID和播放器的属性

HTML代码

<div id="mod_player"></div>

JS代码

<script src="http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8">
<script type="text/javascript">
var video = new tvp.VideoInfo();
video.setChannelId("18091377");
 
var player = new tvp.Player();
player.create({
    width: 480,
    height: 360,
    type: 1,
    video: video,
    modId: "mod_player",
    autoplay: true
});
</script>

DEMO演示

查看演示

直播-iframe调用方法

非腾讯公司的业务域名不能使用iframe形式!如果您是有个活动什么的,想在活动页面直播视频,可以直接在页面用iframe嵌入一个播放器页面:URL:http://v.qq.com/iframe/player.html

cnlid 直播频道id
width 播放器宽度
height 播放器高度

例如:http://v.qq.com/iframe/player.html?cnlid=1975434150&width=600&height=450

DEMO演示

查看演示

其它注意事项:

  • 调用tvp.player.js时必须加上charset="utf-8"以防止乱码问题
  • 目前互娱大部分产品域名已添加至白名单,播放视频时不会再播放广告,如页面上的播放器依然播放广告,或者需要添加新域名到广告白名单,请联系rukkihuang或者banybai。
  • 腾讯视频统一播放页调用代码自动生成工具地址传送

js调用不同版本:

JS路径

说明 内核 播放类别
flash HTML5 控件 MP4链接

点播

直播

http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2.js

完全版(内核是异步按需加载)

http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2_mobile.js

移动设备点播版本

 

 

 

http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2_live.js

直播版本

 

 

http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2_jq.js

jQuery 插件版本(内核异步按需加载),仅支持jQuery1.7以上版本

 

http://imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2_zepto.js

Zepto 插件版本(内核异步按需加载) zepto合并时必须模块:detect,touch

 

 

 

create参数接口:

参数名称 描述
appid 腾讯视频为业务侧分配的appid号,用于统计,如果腾讯视频未分配,可以不填
autoplay 是否自动播放
coverId 专辑id
flashWmode flash播放器的wmode
height 默认高度,单位像素
html5FeatureExtJS HTML5UI?组件功能异步加载JS配置,有些组件由于不是必须,而代码量又很大,所以采用按需加载 配置是JSON格式,key是组件名,value是异步加载的JS文件路径
html5ForbiddenUIFeature HTML5播放器UI需要关闭的功能,跟上述的配置相反,这里列出的功能就不会展现
html5LiveUIFeature HTML5直播播放器UI组件
html5Preload Html5播放器preload属性(暂不启用)
html5VodUIFeature HTML5点播播放器UI组件
isHtml5AutoBuffer Html5播放器是否使用autobuffer属性
isHtml5ControlAlwaysShow HTML5播放器是否一直显示控制栏
isHtml5ShowPlayBtnOnPause 暂停的时候是否显示播放按钮
isHtml5ShowPosterOnChange HTML5播放器切换视频的时候是否要显示Poster
isHtml5ShowPosterOnEnd HTML5播放器播放完毕是否显示poster
isHtml5ShowPosterOnStart HTML5播放开始的时候是否显示poster
isHtml5UseAirPlay Html5播放器是否使用Airplay功能,强烈建议开启
isHtml5UseFakeFullScreen 是否强制使用伪全屏
isHtml5UseUI HTML5播放器是否使用自设计的控制栏
isiPhoneShowPosterOnPause iPhone在暂停的时候是否显示Poster层
isiPhoneShowPlaysinline iPhone是否开启小窗播放(目前只有微信支持)
isLiveFlashShowCfg 直播播放器是否显示配置菜单
isLiveFlashShowConfigBtn 直播播放器是否显示设置按钮
isLiveflashShowFullBtn 直播播放器是否显示全屏按钮
isOcxHideControl 控件是否隐藏控制栏
isOcxShowPauseBtn 控件播放器暂停的时候是否在画面上显示暂停按钮
isVodFlashShowCfg flash点播播放器是否出现设置按钮
isVodFlashShowEnd flash点播播放器播放结束出现结束推荐
isVodFlashShowNextBtn flash点播播放器是否出现“下一个视频”按钮
isVodFlashShowSearchBar flash点播播放器是否出现搜索框
libpath 统一播放器框架的存放路径
liveFlashAppType 直播播放器皮肤类型,不传入则flash播放器内部会默认为live weidiantai:微电台,weidianshi:微电视,live:腾讯直播,inlive:公司内部直播
liveFlashExtVars 直播播放器扩展flashvars
liveFlashSwfType 直播播放器类型
liveFlashUrl 直播播放器swf的url地址
liveFlashWatermark 直播播放器右上角水印图片
loadingSwf loading动画的swf地址
modId 默认的DOM元素ID
mute 是否静音
ocxControlBar 控件控制栏地址
ocxControlHeight 控件控制栏高度
ocxSkin 控件皮肤
oid 广告订单id
pic 默认图片
playerid 播放器id,不指定的话系统会自动分配一个,一般不需要配置
playerType 播放器类别
plugins 使用插件列表,如果配置在这里那么会在write之后自动调用这里列出的插件 当然,用户自己写的插件也可以不用列在这里,直接在外部调用player.
pluginUrl 插件JS存放路径,key是插件名,value是插件的JS路径,跟下面的libpath组合成完成的URL地址 如果定义了这里的路径,那么会异步加载,否则会探测当前页面是否有对应的build+插件名的函数
share 是否显示分享
type 播放器类别
typeId 分类id
video 默认的视频镀锡i昂
vodFlashExtVars flash点播播放器扩展flashvars参数
vodFlashListType 点播flash播放器listtype参数
vodFlashSkin flash点播播放器皮肤地址.精简版皮肤地址:http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf
vodFlashType flash点播播放器类型
vodFlashUrl flash点播播放器地址
volume 默认音量
width 默认宽度,单位像素