h5connect.js 腾讯云视频点播使用指南
http://video.qcloud.com/download/docs/QVOD_Player_Web_SDK_Developer_Guide.pdf
腾讯云视频点播服务
Web播放器SDK开发指南版本:1.3.3时间:2015.12目录
1.概述
腾讯云视频点播播放器Web SDK解决方案,可帮助腾讯云视频用户直接使用经过验证的视频播放能力,通过灵活的接口,快速同自有Web应用集成,以实现桌面应用播放功能。该SDK所播放的文件受限于全局防盗链功能定义。详细内容请查看官网FAQ安全功能相关说明。
2.阅读对象
该文档面向考虑使用腾讯云视频点播播放器Web SDK进行开发并具备javascript语言基础的开发人员。
3.准备
·注册腾讯云点播并上传视频
·页面引入初始化脚本
< script src = "http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js"
charset = "utf-8" > < /script>
注意,播放页面需要挂 ip 或域名访问,如若直接打开本地静态页面将无法播放
4. 开始 API 使用
4.1. 方法总览
l 构造类
构造播放器 qcVideo.Player
l 获取参数和状态
获取当前音量 getVolume
获取当前视频总时长 getDuration
获取当前播放位置 getCurrentTime
当前播放状态“加载中”查询 isSeeking
当前播放状态“暂停中”查询 isSuspended
当前播放状态“播放中”查询 isPlaying
当前播放状态“播放结束”查询 isPlayEnd
获取当前播放器宽度 getWidth
获取当前播放器高度 getHeight
获取当前视频清晰度 getClarity
获取当前视频清晰度 getAllClaritys
l 设置和动作
设置当前播放器宽度高度 resize
播放指定时长点 play
暂停当前播放的视频 pause
恢复播放视频 resume
更换视频清晰度 setClarity
动态更换视频 changeVideo
添加弹幕 addBarrage
关闭弹幕 closeBarrage
4.2. 详细方法
l 构造类
qcVideo.Player(id,option,listener)
功能:播放器构造函数
参数:
1 id: String ; 必选参数 ;页面放置播放器的容器 ID
2 option: Object; 必选参数 ;播放参数
3 listener: function; 可选参数 ; 播放状态变化回调函数
示例一 (传点播文件 ID 的方式):
var player = new qcVideo.Player(
/ / 页面放置播放位置的元素ID“element_id”, {
//视频 ID (必选参数)
“file_id”: “16092504232103514290”,
//应用 ID (必选参数),同一个账户下的视频,该参数是相同的
“app_id”: “1251132611”,
//是否自动播放 默认值0 (0: 不自动,1: 自动播放)
“auto_play”: “0”,
//播放器宽度,单位像素
“width”: 640,
//播放器高度,单位像素
“height”: 480,
//屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)
“disable_full_screen”: 0,
//禁止拖动标识,默认值0 (0: 允许拖拽,1: 禁止拖拽)
“disable_drag”: 1,
//如视频尺寸小于播放器尺寸,拉伸视频至播放器大小,默认值0 (0: 不拉伸,1: 拉伸全屏)
“stretch_full”: 1,
“stop_time”: 60,
//60秒后停止播放(试看功能) , 并且触发“playStatus”事件
“remember”: 1, //1:记住上一次未看完的时间点,下次再播放,从该时间点开始播放
//开启防盗链后,可以通过配置下面的可访问的视频地址,支持播放器播放;清晰度类型通
过url与后台查出的url前缀匹配得到“playbackRate”: 1,
加速播放,
譬如2,表示2倍速度播放,1 / 2表示慢正常速度一倍播放,注意这个值暂时只对h5播放生效;“videos”: [“http: //xxx.myqcloud.com/xxxyy_f220.m3u8?sign=xxx”
…],
//注意,下面所有的地址必须是上面对应的 file_id 的视频资源地址,否则不会生效
“WMode”: “window”,
//默认 window 不支持其他页面元素覆盖在上面,如需要可以
修改为opaque或其他flash Vmode的参数值“stretch_patch”: false,
//默认为 false ,设置为 true 支持将开始、暂停、结束时的图片
贴片,铺满播放器
}, {
//全屏/退出全屏操作 ,isFullScreen: trueà全屏 ; falseà 退出全屏
‘fullScreen’: function(isFullScreen) {
//console.debug(‘out listener isFullScreen == ‘,isFullScreen);
},
//播放状态
‘playStatus’: function(status) {
/*status 可为 {ready: “播放器已准备就绪”,seeking:”搜索”,
suspended:”暂停”, playing:”播放中” , playEnd:”播放结束” , stop: “试看
结束触发”}’*/
//console.debug(‘out listener status == ‘,status);
},
//拖动播放位置变化 ; second 拖动播放的位置(单位秒)
‘dragPlay’: function(second) {
//console.debug(‘out listener dragPlay == ‘,second);
}
});
示例二 (传视频文件播放地址的方式):
var player = new qcVideo.Player(
//页面放置播放位置的元素 ID
“element_id”, {
//是否自动播放 默认值0 (0: 不自动,1: 自动播放)
“auto_play”: “0”,
//播放器宽度,单位像素
“width”: 640,
//播放器高度,单位像素
“height”: 480,
//屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)
“disable_full_screen”: 0,
//禁止拖动标识,默认值0 (0: 允许拖拽,1: 禁止拖拽)
“disable_drag”: 1,
//如视频尺寸小于播放器尺寸,拉伸视频至播放器大小,默认值0 (0: 不拉伸,1: 拉伸全屏)
“stretch_full”: 1,
“stop_time”: 60,
//60秒后停止播放(试看功能) , 并且触发“playStatus”事件
“remember”: 1, //1:记住上一次未看完的时间点,下次再播放,从该时间点播放
//注意,下面所有的地址必须包含 duration(时长)
“WMode”: “window”,
//默认 window 不支持其他页面元素覆盖在上面,如需要可以
修改为opaque或其他flash Vmode的参数值“stretch_patch”: false,
//默认为 false ,设置为 true 支持将开始、暂停、结束时的图片
贴片,铺满播放器“third_video”: {‘duration’: 20,
//视频时长(单位秒)
//10/210->手机, 20/220->标清 , 30/230->高清 , 40/240->超清 ; (至少包含
一个地址)‘urls’: {
10: “mp4手机视频地址”,
20: “mp4标清视频地址”,
30: “mp4高清视频地址”,
40: “mp4超清视频地址”,
210: “hls手机视频地址”,
220: “hls标清视频地址”,
230: “hls高清视频地址”,
240: “hls超清视频地址”
}
}
},
{
//全屏/退出全屏操作 ,isFullScreen: trueà全屏 ; falseà 退出全屏
‘fullScreen’: function(isFullScreen) {
//console.debug(‘out listener isFullScreen == ‘,isFullScreen);
},
//播放状态
‘playStatus’: function(status) {
/*status 可为 {ready: “播放器已准备就绪”,seeking:”搜索”,
suspended:”暂停”, playing:”播放中” , playEnd:”播放结束” , stop: “试看
结束触发”}’*/
//console.debug(‘out listener status == ‘,status);
},
//拖动播放位置变化 ; second 拖动播放的位置(单位秒)
‘dragPlay’: function(second) {
//console.debug(‘out listener dragPlay == ‘,second);
}
});
l获取参数和状态
getVolume()功能:取当前音量返回:Number,取值范围(0到1);如0.5
getDuration()功能:取当前视频总时长返回:int,单位秒
getCurrentTime()功能:取当前播放位置返回:int,单位秒
isSeeking()功能:当前播放状态是否“加载中”返回:Boolean;
true为”加载中”
isSuspended()功能:当前播放状态是否“暂停中”返回:Boolean;
true为”暂停中”
isPlaying()功能:当前播放状态是否“播放中”返回:Boolean;
true为”播放中”
isPlayEnd()功能:当前播放状态是否“播放结束”返回:Boolean;
true为”播放结束”
getWidth()功能:取当前播放器宽度返回:int
getHeight()功能:取当前播放器高度返回:int
getClarity()功能:取当前视频的清晰度返回:int(1: ”手机”,
2: “标清”,
3: “高清”,
4: “超清”)
getAllClaritys()功能:取当前视频全部的清晰度返回:Array < int > (1: ”手机”,
2: “标清”,
3: “高清”,
4: “超清”)
l设置和动作
resize(width, height)功能:设置当前播放器宽度高度参数:
1 width: int;播放器宽度
2 height: int;播放器高度
play(second)功能:开始播放指定时长点参数:int;
second单位秒返回:int;操作结果返回码
pause()功能:暂停当前播放的视频返回:int;操作结果返回码
resume()功能:恢复播放视频返回:int;操作结果返回码
setClarity(clarity)功能:更换视频清晰度参数:int;
clarity清晰度取值范围(1:”手机”, 2:”标清”, 3:”高清”, 4:”超清”)注意:clarity指定的清晰度,请确保当前视频具备该清晰度,否则将按播放器默认规则选择一个清晰度播放返回:int;操作结果返回码
changeVideo(opt)功能:动态更换视频参数:opt Object;包含将要播放的视频的基本信息,和构造函数第二个参数基本一致;返回:int;操作结果返回码示例:
player.changeVideo({
//视频 ID (必选参数)
“file_id”: “16092504232103514290”,
//应用 ID (必选参数)
“app_id”: “1251132611”,
//是否自动播放 默认值0 (0: 不自动,1: 自动播放)
“auto_play”: “0”,
//屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)
“disable_full_screen”: 0,
//非点播用户或开防盗链的用户 ,切换视频源使用下面参数,同构造方法输入
“third_video”: null
});
addBarrage(barrage)功能:添加弹幕参数:Array;
barrage弹幕信息返回:int;操作结果返回码示例:
player.addBarrage([{
“type”: ”content”,//消息类型 ,content:普通文本 (必选)
“content”: ”hello world”,//文本消息 (必选)
“time”: ”1.101”,//单位秒 ,表示 距离当前调用添加字幕的时间多久后,开始显示该条字幕 (必选)
}, {“type”: ”content”,//同上条 (必选)
“content”: ”MD35号字居中”,//同上条 (必选)
“time”: ”2.101”,//同上条 (必选)
“style”: “C64B03;35”, // 分号分割,第一项颜色值,第二项字体 (可选)
“postion”: ”center” //固定位置 center: 居中,bottom: 底部, up: 顶上 (可选)
},
…])
closeBarrage()功能:关闭弹幕,
调用addBarrage后,弹幕将继续开启返回:int;操作结果返回码l返回码·200: 操作成功·0: 播放器未完全初始化· - 1: 动态更换失败视频,缺少必要参数· - 2: 未知操作命令· - 3: 播放时间超出有效播放范围
5.视频文件上传功能
用户可使用点播上传Web SDK,以帮助腾讯云视频用户通过Web上传视频文件。该SDK当前支持HTML5上传(不支持HTML5的浏览器暂不支持上传)具体操作方法请阅:http: //video.qcloud.com/sdk/upload.html
6.视频文件操作API说明
关于如何对视频文件进行操作,包括上传,发布等内容,请参考官网链接:
http: //wiki.qcloud.com/wiki/v2/CreateVodTags
7.SDK升级历史信息和文档变更版本号发布日期说明
1.0 2015.5第一版本,基本播放功能;
1.1 2015.6新增视频拖动播放位置事件
1.1 2015.6新增视频全屏 / 退出全屏事件
1.1 2015.6新增支持防盗链调用播放器
1.2 2015.6.23新增支持非点播用户使用播放器
1.3 2015.7新增文件上传功能;播放器禁止拖动和拉伸视频至播放器大小
1.3.1 2015.08.17增加试用配置 / 播放记忆功能
1.3.2 2015.08.31增加试看结束回调事件
1.3.3 2015.09.15增加弹幕展示
1.3.3 2015.09.15增加修改flash显示层级Wmode
1.3.3 2015.09.15增加拉伸图片贴片高宽至播放器大小stretch_patch
1.3.3 2015.09.15增加关闭弹幕的接口
1.3.3 2015.11.23点播用户使用防盗链传URL的参数
1.3.3 2015.12.22点播H5播放,支持加速减速播放playbackRate
8.反馈和建议
腾讯云用户可以通过提交工单或联系客服的方式,对使用中发现的问题和意见建议进行反馈,我们的技术人员会同您联系。如果上面的API方法不能满足您的需求,如果您有好的建议和想法,都可以邮件我们的攻城狮trumpli@tencent.com。——文档结束——
h5connect.js 腾讯云视频点播使用指南的更多相关文章
- 微信小程序接入腾讯云IM即时通讯(会话列表)
会话列表功能概述: 登录 :先用自己的账号登录腾讯云: 获取会话列表 :登录之后再获取会话列表: 更新未读消息数量 :获取会话列表之后更新未读消息数量 WXML代码(自己写的将就看一下) <vi ...
- 腾讯云Windows2016数据中文版环境搭建
最近忙活了好几天,在腾讯云上买了台服务器,系统是Windows2016数据中文版,用于个人的学习,下面说一下整个流程吧. 遇到的问题: 一开始是按照腾讯云的指南文档去搞环境配置的,但它上面都是以Win ...
- 在腾讯云(windows)上搭建node.js服务器
1:安装Node.js 使用MSI文件,并按照提示安装node.js,默认情况下,安装程序将 Node.js 发行到 C:\Program Files\nodejs. 但这里我们需要修改安装路径到:D ...
- 腾讯云部署golang flow流程,vue.js+nginx+mysql+node.js
这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...
- 【重学Node.js 第5篇】部署项目到腾讯云服务器
课程介绍看这里:https://www.cnblogs.com/zhangran/p/11963616.html 项目github地址:https://github.com/hellozhangran ...
- 腾讯云短信服务+Node.js给手机发送验证码
最近公司需要些一个登陆验证和修改密码验证,需要用到验证码,我用Node.js写了一个给手机发验证码的代码,下面实现的功能有:生产验证码,(计时器)验证码失效时间,给手机发送短信. 首先看官方文档,在给 ...
- 在腾讯云centos7.2上安装配置Node.js记录
应为爱好前端所以打算在腾讯云服务器上安装JavaScript引擎Node.js,下面是安装步骤: 安装准备: 下载node.js的.tar.xz安装包:https://nodejs.org/dist/ ...
- 从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...
- 腾讯云下安装 nodejs + 实现 Nginx 反向代理
本文将介绍如何给腾讯云上的 Ubuntu Server 12.04 LTS 64位主机安装 node 及 nginx,并简单配置反向代理. 笔者在整个安装过程中遇到不少麻烦(不赘述),如果你希望少踩坑 ...
随机推荐
- 求奇数的乘积 AC 杭电
求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- c语言实现灰度图转换为二值图
将上篇得到的灰度图转换为二值图,读取像素数据,低于某一值置0,否则设置为255,为得到更好的效果不同图片应采用不同的值 /* 2015年6月2日11:16:22 灰度图转换为二值图 blog:http ...
- GetMenu返回0解决方法
在CMainFrame类中找到CMFCMenuBar m_wndMenuBar;这个成员变量,将跟它相关的代码注释掉的话,然后运行,OK.
- Autofact 的使用
资料: http://www.cnblogs.com/linhan/p/4298971.html --其他博友 http://autofac.org/# --官网 http://efmvc.codep ...
- UICollectionView 讲解-备
什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最 ...
- 复杂事件处理引擎—Esper 处理模型
1.esper的处理模型是持续性的——根据statement中事件流(event stream).视图(views).过滤器(filters)等的选择,esper引擎一旦处理事件数据,就会变更stat ...
- 『电脑技巧』破解Win7/Win8登录密码
Pic via baidu 0x 00 破解思路 用户的明文密码经过单向Hash加密生成Hash散列,Hash散列又被加密存放在系统盘\Windiws\System32\config文件下 要获得明文 ...
- MFC的GUI窗口使用Console输出函数printf
在GUI程序中使用printf函数: #include <io.h> #include <fcntl.h> void InitConsole() { ; FILE* fp; A ...
- Android 自定义View(button)
很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章.先总结下自定义View的步骤 ...
- BZOJ1725: [Usaco2006 Nov]Corn Fields牧场的安排
1725: [Usaco2006 Nov]Corn Fields牧场的安排 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 400 Solved: 290 ...