1 基本介绍

Size: px

Start display at page:

Download "1 基本介绍"

酒何
5 years ago
Views:

$Android 支持的浏览器兼容 IE6\7\8\9\10\11,QQ 浏览器 TT 浏览器遨游 Firefox safari opera chrome 等主流浏览器播放内核 FLASH HTML5 P2P?$

1 腾讯统一播放器 API 文档 1 基本介绍腾讯视频通用播放器是一个使用 JS 封装好的 web 端视频播放器框架, 提供视频播放的基础 API, 方便调用方在任意网页嵌入腾讯平台的视频或者网络直播支持的设备和平台设备类型 PC 和移动设备支持的操作系统 windows Mac ios Android 支持的浏览器兼容 IE6\7\8\9\10\11,QQ 浏览器 TT 浏览器遨游 Firefox safari opera chrome 等主流浏览器播放内核 FLASH HTML5 P2P? 控件公司任何业务需要调用播放器, 都可以直接引用 JS 代码即可, 无需关心设备的播放特征,

2 2 统一播放器 CDN URL 说明支持的内核播放类别完全版 ( 内核是异步按需 flash HTML5 控件点播直播 entvideo_v1/tvp/js/tvp.playe r_v2.js 加载 ) MP4 链接移动设备点播版本 flash HTML5 点播 entvideo_v1/tvp/js/tvp.playe r_v2_mobile.js 移动设备直播版本 flash HTML5 控件直播 entvideo_v1/tvp/js/tvp.playe r_v2_live.js jquery 插件版本 ( 内核 flash HTML5 控件点播直播 entvideo_v1/tvp/js/tvp.playe r_v2_jq.js 异步按需加载 ), 仅支持 jquery1.7 以上版本 Zepto 插件版本 ( 内核异步 flash HTML5 点播 entvideo_v1/tvp/js/tvp.playe r_v2_zepto.js 按需加载 ) zepto 合并时必须模块 :detect,touch 2.1 CDN 文件列表文件名 tvp.ocx_kernel.js tvp.player_v2.js tvp.player_v2_3g.js 使用场景 DRM 控件播放器控制页内核文件外部第三方业务调用的文件无

3 tvp.player_v2_html5.js tvp.player_v2_jq.js tvp.player_v2_zepto.js tvp.player_v2.jqmobi.js html5 播放专用 jquery 插件版 zepto 插件版 jqmobi 插件版 2.2 支持 https 开始支持 https,cdn 域名 : 3 如何使用 3.1 JSAPI 调用方案调用步骤为 : 1. 必须引入腾讯视频播放器 JS 2. 创建 tvp.videoinfo 类 ( 待播放的视频信息 ) 的对象实例, 并传入视频 vid 或者直播频道 id 3. 创建 tvp.player 类 ( 播放器信息 ) 的对象实例 4. 通过播放器对象实例的 create 接口设置输出目标容器 ID 和播放器的属性点播首先, 先在页面添加一个 div, 设置 id, 当做播放器的容器, 后面播放器将输出到这个 div 里 : <script src=" type="text/javascript" ></script>

4 <div id="mod_player"></div> var video = new tvp.videoinfo(); video.setvid("i f"); var player =new tvp.player(); player.create({ width:480, height:360, video:video, modid:"mod_player", autoplay:true }); 注意 : 1.ios 的 HTML5 直播是使用 HLS 技术, 该技术只有 ios/ 部分 android 系统才支持, 所以用 chrome safari 修改 useragent 模拟是看不到效果的, 可能会黑屏 2. 安卓手机基本不支持 HLS, 则只能使用 flash 播放直播, 如果您使用的安卓设备不支持 flash ( 能安装 flash 跟支持 flash 是两回事 ), 则无法播放直播节目, 可以找 wwjs 使用安卓 SDK 播放直播节目 3.2 使用 seajs 或 requirejs 统一播放器可以直接引用 JS 文件调用接口, 也可以作为 commonjs 模块, 通过 seajs 或者 requirejs 加载以 seajs 加载为例 :(seajs alias 配置 ) seajs.config({ alias:{ "tvp":" } });

5 我们创建一个 demo 模块, 改模块通过 require 引用统一播放器 seajs_tvp_demo.js 定义 : define(function(require, exports, module) { var demo = { initplayer: function(modid) { var $P = require("tvp"); var video = new $P.VideoInfo(); video.setvid("c0013mhe2en"); var myplayer = new $P.Player(); myplayer.create({ width: 420, height: 280, video: video, modid: modid, autoplay: false }); } }; module.exports = demo; }); 业务逻辑调用 : seajs.use("seajs_tvp_demo",function(obj){ obj.initplayer("mod_player"); }) 3.3jQuery/Zepto 插件版调用方案腾讯视频统一播放器自身可以作为 jquery 或者 Zepto 的插件运行插件版本有专门的 JavaScript?_ 文件

6 httd://imacache.atima.cn/tencentvideo vl/tvd/is/tvd.oiaver v2 ia.is UTF-8 iquery 插件版本 httd://imacache.atima.cn/tencentvideo vl/tvd/is/tvd.oiaver v2 zedto.is UTF-8 Zepto 插件版本插件版调除了可以使用上述标准的调用以外, 还可以使用建议的调用方案 : $(".mod_player").createtvp({ video:{vid:mi fm}/ width:450, height:300 }); 4 api 参数和方法 4.1 tvp.videoinfo 函数名称用途 setvid(vid::string) 设置视频的 vid, 此方法会在设置视频 id 的同时将视频对象的其他信息还原 setcoverid(cid::string) 设置视频的专辑 id( 调用此方法设置的专辑 id 不会添加到 falshvars 里, 要添加到 flashvars 里请在调用播放器对象的 create 方法时传入 coverid) settitle(title::string) 设置视频的标题 setchannelid(cnlid::string) 设置直播频道的频道 id sethistorystart(second::number) 设置从指定 second 秒开始播放 getvid() 获取视频的 vid getchannelid() 获取直播频道的频道 id settagstart(istart::number) 设置看点开始时间

7 函数名称用途 settagend(iend::number) 设置看点结束时间 getvideosnap() 获取视频截图, 返回一个数组, 包含了几种规格的视频截图 URL 地址 4.2 tvp.player() 接口名称描述 create(object::config) 创建播放器, 其中 config 是传入的设置参数 JSON pause() 暂停播放 play() play 接口无参数时, 表示继续播放, 一般用于 pause() 以后的继续播放 play(video::tvp.videoinfo?) 上面 play() 接口的多态形式, 有参数时表示播放指定的视频, 主要用于无刷新切换正在播放的视频 getplaytime() 获取当前播放的时间, 返回单位是秒 switchtoocx() 从 flash 播放器切换到控件播放器 switchtoflash() 从控件播放器切换到 flash 播放器 4.3 tvp.player() 对象提供的事件列表参数名称描述 onwrite oninited onchange onplay onplaying 当输出播放器时当播放器初始化完毕时,flash 播放器在 swf 文件加载完毕触发,html5 播放器在视频载入完毕触发播放器播放的视频发生变化时播放器开始播放时, 触发了播放请求单不一定播放视频, 有可能视频在缓冲中或者在播放广告播放器真正开始播放视频第一帧画面时

8 参数名称描述 ongetnext onallended onpause onresume onfullscreen(isful l) onerror 当播放器播放视频完毕, 准备获取下一个视频时播放器播放完毕时播放器触发暂停时, 目前只针对 HTML5 播放器有效暂停后继续播放时触发播放器触发全屏 / 非全屏时, 参数 isfull 表示当前是否是全屏当播放器发生错误时示例 <script src=" type="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.videoinfo(); video.setvid("i f"); var player =new tvp.player(); player.create({ width:480, height:360, video:video, modid:"mod_player", onwrite:function(){alert(" 播放器显示完毕 ");} });

9 4.4 create 接口接受的配置参数列表参数名称支持的平台描述 appid All 腾讯视频为业务侧分配的 appid 号, 用于统计, 如果腾讯视频未分配, 可以不填 oid All 广告订单 id pic All 默认图片 playerid All 播放器 id, 不指定的话系统会自动分配一个, 一般不需要配置 playertype All 播放器类别 autoplay All 是否自动播放 type All 播放器类别 typeid All 分类 id video All 默认的视频对象 coverid All 专辑 id libpath All 统一播放器框架的存放路径 modid All 默认的 DOM 元素 ID width All 默认宽度, 单位像素 height All 默认高度, 单位像素 html5featureextjs H5 HTML5UI? 组件功能异步加载 JS 配置, 有些组件由于不是必须, 而代码量又很大, 所以采用按需加载配置是 JSON 格式,key 是组件名,value 是异步加载的 JS 文件路径 html5forbiddenuifeat ure H5 HTML5 播放器 UI 需要关闭的功能, 跟上述的配置相反, 这里列出的功能就不会展现 html5liveuifeature H5 HTML5 直播播放器 UI 组件 html5preload H5 Html5 播放器 preload 属性 ( 暂不启用 ) ishtml5autobuffer H5 Html5 播放器是否使用 autobuffer 属性

10 参数名称支持的平台描述 ishtml5controlalways Show H5 HTML5 播放器是否一直显示控制栏 ishtml5showplaybtnon Pause H5 暂停的时候是否显示播放按钮 ishtml5showposteronc hange H5 HTML5 播放器切换视频的时候是否要显示 Poster ishtml5showposterone nd H5 HTML5 播放器播放完毕是否显示 poster ishtml5showposterons tart H5 HTML5 播放开始的时候是否显示 poster ishtml5useairplay H5 Html5 播放器是否使用 Airplay 功能, 强烈建议开启 ishtml5usefakefullsc reen H5 是否强制使用伪全屏 ishtml5useui H5 HTML5 播放器是否使用自设计的控制栏 isiphoneshowposteron Pause H5 iphone 在暂停的时候是否显示 Poster 层 isiphoneshowplaysinl ine H5 iphone 是否开启小窗播放 ( 目前只有微信支持 ) plugins H5 使用插件列表, 如果配置在这里那么会在 write 之后自动调用这里列出的插件当然, 在外部调用 player. pluginurl H5 插件 JS 存放路径,key 是插件名,value 是插件的 JS 路径, 跟下面的 libpath 组合成完成的 URL 地址如果定义了这里的路径, 那么会异步加载, 否则会探测当前页面是否有对应的 build+ 插件名的函数 iscontinueplay H5 是否续播, 默认 true isliveflashshowcfg Flash 直播播放器是否显示配置菜单 isliveflashshowconfi gbtn Flash 直播播放器是否显示设置按钮 flashwmode Flash flash 播放器的 wmode isliveflashshowfullb Flash 直播播放器是否显示全屏按钮

11 参数名称支持的平台描述 tn isvodflashshowcfg Flash flash 点播播放器是否出现设置按钮 isvodflashshowend Flash flash 点播播放器播放结束出现结束推荐 isvodflashshownextbt n Flash flash 点播播放器是否出现下一个视频按钮 isvodflashshowsearch Bar Flash flash 点播播放器是否出现搜索框 share Flash 是否显示分享 vodflashextvars Flash flash 点播播放器扩展 flashvars 参数 vodflashlisttype Flash 点播 flash 播放器 listtype 参数 vodflashtype Flash flash 点播播放器类型 vodflashurl Flash flash 点播播放器地址 volume Flash 默认音量 ocxcontrolheight DRM 控件控制栏高度 isocxhidecontrol DRM 控件是否隐藏控制栏 isocxshowpausebtn DRM 控件播放器暂停的时候是否在画面上显示暂停按钮 mute 无是否静音 4.5 create 接口 vodflashextvars 可扩展的配置参数参数参数值和说明 share 是否显示分享功能入口, 默认显示 0 为隐藏,1 为显示 shownext 是否显示下一集按钮, 默认不显示 1 为显示 light 是否显示开关灯, 默认显示 0 为隐藏,1 为显示

12 参数参数值和说明 popup 是否显示弹出小窗口按钮, 默认显示 0 为隐藏,1 为显示 follow 是否显示关注按钮, 默认显示 0 为隐藏,1 为显示 showend 功能同上面的 isvodflashshowend, 强制指定是否显示播放结束界面 0 为不显示 1 为显示, 默认为显示 searchbar 是否显示顶部搜索框 ;1 显示,0 不显示, 默认为 1 searchpanel 是否显示包含搜索分享等的浮层 0: 不显示,1: 显示, 默认为显示建议设置搜索框不显示时, 结束推荐 (showend) 也设置不显示 clientbar Flash 播放器下方的下载 banner 默认是 1 打开 0 为关闭 4.6 create 接口 pic 参数可接受的域名白名单 & DEMO vpic.video.qq.com ossweb-img.qq.com cache.tv.qq.com imgcache.qq.com im-img.qq.com im.qq.com img1.qq.com mat1.qq.com tt.qq.com img1.gtimg.com

13 mat1.gtimg.com i.gtimg.cn qzonestyle.gtimg.cn ctc.qzonestyle.gtimg.cn cnc.qzonestyle.gtimg.cn cm.qzonestyle.gtimg.cn cn.qzonestyle.gtimg.cn os.qzonestyle.gtimg.cn edu.qzonestyle.gtimg.cn img1.qqinternal.com 对象和参数说明腾讯视频播放器框架是完全采用面向对象的思想使用 javascript 编写, 为了防止变量冲突, 框架提供的 API 都统一在 window.tvp 命名空间下框架通过两个核心的对象接口实现对视频的播放这里简单介绍下统一播放器最常使用的两个核心对象和接口参数 tvp.videoinfo 视频信息 tvp.videoinfo 是视频信息对象, 作用是对准备播放的视频信息属性的描述, 例如视频的 vid 直播频道的频道 id 视频时长视频起止时间视频标题... tvp.player(width,height) 播放器 tvp.player 是播放器对象, 提供对播放器的描述和属性设置, 例如播放器是直播还是点播播放器类别 ( 控件 Flash 还是 HTML5) loading 动画默认图片皮肤 tvp.player 接受两个参数作为构造函数,width 表示播放器的宽度,height 表示高度, 单位为像素 px 注意 : 白名单域名是固定的, 暂不接受新增域名, 且涵盖了公司绝大部分公司级的 CDN 域名, 如有图片需要作为默认图显示, 可以考虑将图片上传到以上任意域名

$:plugins: {AppRecommen?_: true} 即可, 例如 : var player = new tvp.player(); player.$

14 显示微信公众账号热门视频统一播放器集成了播放器非全屏状态下暂停或结束时显示微信公众账号热门推荐视频功能要在播放器显示微信公众账号热门视频, 首先场景是微信中的公众账号页面, 根据页面 url 参数取得公众账号 id; 微信中支持检测是否安装腾讯视频 app, 通过检测是否安装腾讯视频 app 来处理热门视频的跳转链接然后在 create 播放器的时候, 使用参数 :plugins: {AppRecommen?_: true} 即可, 例如 : var player = new tvp.player(); player.create ({ width:480, height:360, vide 〇 :vide 〇, m 〇 did:nm 〇 d_player", autoplay:true, plugins: { AppRecommend: true }

15 }); 5 相关插件 5.1 下载 banner & DEMO 显示腾讯视频移动 App 下载 banner, 统一播放器 2.0 己经集成了下载 Banner 的提示功能网页端使用 HTML5 播放视频, 实际上是依赖浏览器或者 webview 对 HTML5 的 video 标签进行解析, 并依赖其自身对 H.264 编码的视频进行解码实现的也就是说, 除了控制栏我们能通过 DIV+CSS 进行重写以外, 其他内部播放逻辑前端 JS 实际上是无法控制所以我们跟推荐用户下载我们的视频 App, 享受更高清的画质更流畅的体验

16 下载 banner 用法 <script src=" t ype="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.videoinfo(); video.setvid("i f"); var player =new tvp.player(); player.create({ width:480, height:360, video:video, modid:"mod_player", autoplay:true, plugins: { AppBanner: { btntext: ' 下载腾讯视频, 观看更多 ' } // 或者用默认参数配置 // AppBanner: true // 分配的渠道号 (761) 配置 //AppBanner: { // 'promotionid': 761, // 'downloadurl': " tform=aphone" //} } }); 下载 Banner DEMO 入口 :

17 常用参数参数说明 btntext vid promotionid downloadurl 按钮文案如果已经安装腾讯视频 app, 点击用 app 打开这个 vid 的视频上报的渠道 ID 默认值 : =aphone, 如果要统计下载的渠道号, 替换掉 url 里面的默认渠道号暂停 banner & DEMO

暂停 banner 用法 & DEMO <script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" t ype="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.videoinfo(); video.

18 暂停 banner 用法 & DEMO <script src=" t ype="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.videoinfo(); video.setvid("i f"); var player =new tvp.player(); player.create({ width:480, height:360, video:video, modid:"mod_player", autoplay:true, plugins: { AppBannerOnPause: true } }); 暂停 Banner DEMO 入口 :

5.3 结束推荐 & DEMO 结束推荐插件用法 <script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" t ype="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.

19 5.3 结束推荐 & DEMO 结束推荐插件用法 <script src=" t ype="text/javascript" ></script> <div id="mod_player"></div> var video = new tvp.videoinfo(); video.setvid("i f"); var player =new tvp.player(); player.create({ width:480, height:360, video:video, modid:"mod_player", autoplay:true, plugins: { AppRecommend: true } });

20 结束推荐 DEMO 入口 : 6 用法实例请用手机访问查看统一播放器的全部实例效果全部 DEMOS 入口 :

暴风云视点播解决方案

暴风云视点播解决方案暴风云视频点播解决方案目录 1. 简介...2 1.1. 点播的定义...2 1.2. 点播的基本功能描述... 2 1.2.1. 基本功能...2 1.2.2. 功能示意图...3 1.2.3. 工作流程演示图... 4 1.2.4. 特性和指标描述... 4 2. 应用场景...5 2.1. 适合的