腾讯统一播放器调用方案

来源：互联网发布：第七龙神20202技能数据编辑：程序博客网时间：2024/05/21 06:39

腾讯视频统一播放器调用方案

(2012-11-23 11:09:23)

转载▼

标签：

视频

播放器

腾讯视频

it

分类：工作中常用

腾讯统一播放器调用方案

//加载腾讯视频

（注意，默认情况下，视频处为最高级，总是处于页面的最上层，应当设置其透明，player.addParam("wmode","transparent");）

一般：

Js:

//加载腾讯视频，此方法依赖腾讯视频播放器组件

changeVideoBox:function(videoID,v_width,v_height,auto){

var video = new tvp.VideoInfo();

video.setVid(videoID);

var player = new tvp.Player(v_width, v_height);

player.setCurVideo(video);

player.addParam("autoplay",auto);

player.addParam("wmode","transparent"); player.addParam("showcfg","0");

player.addParam("flashskin","http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");

player.addParam("showend",0)//结束画面是否有广告画面，或者是该视频本身结束

player.onplaying=function(vid){}

player.onended=function(){}

player.write("mod_player");

getParam:function(paramName){

paramValue = "";

isFound = false;

if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=")>1)

{

arrSource = (this.location.search).substring(1,this.location.search.length).split("&");

i = 0;

while (i < arrSource.length && !isFound)

{

if (arrSource[i].indexOf("=") > 0)

{

if (arrSource[i].split("=")[0].toLowerCase()==paramName.toLowerCase())

{

paramValue = arrSource[i].split("=")[1];

isFound = true;

}

i++;

}

return paramValue;

}

Html:

Often.changeVideoBox("r01063879fo","199","140",0);自动播放，

</script>

直接播放：Often.changeVideoBox("r01063879fo","199","140",1);不自动播放，

腾讯视频统一播放器调用方案

可控制按钮：Often.changeVideoBox("r01063879fo","199","140",0);

腾讯视频统一播放器调用方案

player.addParam("wmode","transparent");//设置透明化，不设置时，视频为最高级，总是处于页面的最上面，此时设置z-index无效

player.addParam("flashskin","http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");//此参数使视频窗口为小窗口。即，如图：

腾讯视频统一播放器调用方案

没有此参数，默认为大窗口，即：

腾讯视频统一播放器调用方案

结束时，界面：

player.addParam("showend",0)即是视频本身的界面：

腾讯视频统一播放器调用方案

没有改参数，即是播放器默认的界面，广告界面：

腾讯视频统一播放器调用方案

视频弹窗时，应注意关闭弹窗时，再重新打开是，视频应该重新加载，即：
<script type="text/javascript">
jQuery('.closePop').bind('click', function(){
                $("#mod_player").html("");
                Dialog.close();
            })
</script>

具体如下：

基本介绍

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

腾讯视频统一播放器调用方案

调用方案

腾讯视频统一播放器调用主要分为两个步骤：
步骤1：调用播放器的页面需要引入腾讯视频播放器JS文件；
步骤2：创建腾讯视频统一播放器对象和视频对象，设置属性，输出播放器；

JS存放路径

腾讯视频JS存放路径为： http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js 编码为utf-8

点播调用方案

var video = new tvp.VideoInfo();

//向视频对象传入视频vid

video.setVid("9KZiLnxtCMv");

var player = new tvp.Player(600, 450);

//设置播放器初始化时加载的视频

player.setCurVideo(video);

//输出播放器

player.write("mod_player");

</script>

直播调用方案

var video = new tvp.VideoInfo();

//向视频对象传入直播频道id

video.setChannelId("18091377");

var player = new tvp.Player(500, 334);

//设置播放器初始化时加载的视频

player.setCurVideo(video);

//设置播放器为直播状态，1表示直播，2表示点播，默认为2

player.addParam("type","1");

//输出播放器

player.write("mod_player");

</script>

说明：
整个步骤为：
必须引入腾讯视频播放器JS
创建tvp.VideoInfo?类（待播放的视频信息）的对象实例，并传入视频vid或者直播频道id。
创建tvp.Player类（播放器信息）的对象实例。
将视频信息传入到播放器对象中。
通过播放器对象实例的write接口将播放器输出到指定的HTML元素中。

点播跟直播的区别主要是：
1. 点播是通过video.setVid(vid); 而直播是通过video.setChannelId(cnlid); 设置直播id
2. 点播需要player.addParam("type","2");或者省略，因为默认播放器为点播状态;直播必须通过player.addParam("type","1");设置播放器为直播状态，。

对象和参数说明

腾讯视频播放器框架是完全采用面向对象的思想使用javascript编写，为了防止变量冲突，框架提供的API都统一在window.tvp 命名空间下。框架通过两个核心的对象接口实现对视频的播放。

框架在tvp命名空间下提供了许多的接口，详细可以点击查看

这里简单介绍下统一播放器最常使用的两个核心对象和接口参数

tvp.VideoInfo?()视频信息

tvp.VideoInfo?是视频信息对象，作用是对准备播放的视频信息属性的描述，例如视频的vid、直播频道的频道id、视频时长、视频起止时间、视频标题……

接口列表：

函数名称

用途

setVid(vid::string)

设置视频的vid

setChannelId(cnlid::string)

设置直播频道的频道id

getVid()

获取视频的vid

getChannelId()

获取直播频道的频道id

setTagStart(iStart::number)

设置看点开始时间

setTagEnd(iEnd::number)

设置看点结束时间

setTitle(sTitle::string)

设置视频标题

tvp.Player(width,height) 播放器

tvp.Player是播放器对象，提供对播放器的描述和属性设置，例如播放器是直播还是点播、播放器类别（控件、Flash还是HTML5）、loading动画、默认图片、皮肤……

tvp.Player 接受两个参数作为构造函数，width表示播放器的宽度，height表示高度，单位为像素px。

接口列表：

接口名称

描述

setCurVideo(video::tvp.VideoInfo?)

设置播放器加载时的默认播放视频对象

addParam(key::string,value::number|string)

向播放器传递参数，设置播放器的基本属性，包括直播/点播、是否自动播放、皮肤属性等…

write(elementId::string)

输出播放器到id为参数elementId的HTML元素中

play(video::tvp.VideoInfo?)

播放指定的视频，主要用于无刷新切换正在播放的视频

switchToOcx()

从flash播放器切换到控件播放器

switchToFlash()

从控件播放器切换到flash播放器

其中addParam方法可接受的参数和参数值类型为：

参数

参数值和说明

player

播放器类别；有4种参数，auto：自动，ocx：控件播放器，flash：flash播放器，html5：html5播放器，默认为auto，程序自动根据操作系统、平台以及浏览器选择最合适的播放器。

type

播放器使用场景；1表示直播，2表示点播；默认为2点播。

adplay

是否播放广告；1播放，0不播放，默认为1

showcfg

是否显示控制列表；1显示，0不显示，默认为1

loadingswf

加载视频时的swf动画; 不传入则使用默认样式

autoplay

是否自动播放；1自动播放，0不自动播放，默认是1

pic

播放器默认图，当autoplay=0时有效；不传入则使用视频截图

flashskin

flash播放器皮肤；不传入则使用默认皮肤；点播状态下可选值（注意仅限点播，直播无效）：http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf

wmode

flash播放器的wmode设置，仅对flash播放器有效

swfurl

点播状态flash播放器的swf文件路径，仅对flash播放器有效，如果您有专门定制的swf点播播放器，可以通过这个参数来指定路径

controls

html5播放器是否显示控制栏，仅对html5播放器有效；设置为controls显示，disabled不显示，默认显示。

框架在tvp命名空间下提供了许多的接口，

常见问题和反馈

Q：为什么一直显示缓冲中，无法播放？
A：可能是因为公司网络环境问题，视频源被8000拦截了，尝试访问任意一个受限网站，申请30分钟临时访问权限试试。

Q：对于直播，为什么有时候是flash有时候是控件呢？
A：默认会使用flash播放，但有两种情况会切换到控件：
1. 不是所有的频道都支持flash，这时会自动切换到控件；
2. 由于访问人数过多，支持flash直播的server压力过大，server会告知播放器后面新来的用户会使用控件采用P2P?模式播放。

Q：如果没有安装腾讯视频播放器就看不了直播是吗
A：默认会使用flash播放器，如果是flash就不需要直播控件，如果在服务器告知用户需要切换到控件，播放器JS会自动判断是否有装控件，并使用控件播放或者提示用户安装控件。

如果您有其他问题，
在使用API中如果有任何问题，请咨询popotang
直播信号：wwjs
直播频道id申请：paull

阅读(11770)┊ 评论 (1)┊收藏(0) ┊转载(3)┊ 喜欢▼ ┊打印┊举报

已投稿到：

排行榜

前一篇：倒计时计时器

后一篇：图片轮播。主题内容同步改变。

0 0