腾讯统一播放器调用方案

最新推荐文章于 2024-11-15 15:55:47 发布

Hustudent20080101

最新推荐文章于 2024-11-15 15:55:47 发布

阅读量4k

点赞数

分类专栏：网络多媒体 web

web 同时被 3 个专栏收录

707 篇文章

订阅专栏

网络

317 篇文章

订阅专栏

多媒体

109 篇文章

订阅专栏

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

(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.οnplaying=function(vid){}

player.οnended=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?模式播放。