使用API

vhall组件方法说明

参数 说明
autoPlay 是否自动播放,{{true}}或者{{false}}, 默认为false
playSource 播放源信息(包含播放线路,画质)
fullScreenChange 播放器全屏及退出全屏时将会触发
playWaiting 播放视频缓存时将会触发
playTimeUpdate 播放视频当前时间(350ms触发一次)
playStatus 当前活动播放状态
onMessage 播放时的消息通知
errorMsg 错误消息通知

1、playSource说明

playInfo: {
  sourceInfo: {
    lineTypes: ['线路1', '线路2'], /* 当前存在线路 */
    qualiTypes: ['same', 'a', '720p', '480p' , '360p'] /* 当前存在视频质量 */
  },
  currentLineIndex:0, /* 当前使用线路下标 */
  currentQuality:'same' /* 当前使用视频质量下标 */
}

2、fullScreenChange说明

{
  fullScreen: true, /* false竖屏,true横屏 */
  direction: "horizontal" /* vertical竖屏, horizontal横屏 */
}

3、playWaiting说明

{
  type: 4002,
  msg: "视频等待缓冲中..."
}

4、playTimeUpdate说明

{
  currentTime: 0, /* 当前播放到时长(单位s) */
  duration: "244.32" /* 视频总时长(单位s) */
}

5、playStatus说明

{
  type: 1, /* 1直播,2预告,3回放 */
  msg: "2" /* 文字描述内容 */
}

6、onMessage说明

{
  type: "over", /* 消息类型start:直播开始, over:直播结束, kickout:直播被踢, kickoutRestore:恢复踢出 */
  webinar_id: "821744190", /* 活动id */
  publish_release_time: "2018-05-11 12:49:58" /* 发送时间 */
}

## JS方法说明

JavaScript功能API

名称 参数 说明
setOptions 见上面 初始化方法
play 视频播放方法
pause 视频暂停或者停止方法
seek number seek视频进度,参数是秒数
fullScreen number(可选) 参数选填 0,90,-90,默认为0 ,进入全屏,控制屏幕转动方向
exitFullScreen 退出全屏
changePlaySource Object 切线或者切源{currentLineIndex: 0,currentQuality:0}

setOptions参数

参数 说明
roomid 活动id
account 账号
username 用户名
app_key 应用开放key
sign 签名
signedat 签名时间差

1、使用样例

myPlugin.setOptions({
  account: '1',
  app_key: '6df499bf2a22a53fef0b4b1c2c3292bf16e145',
  roomid: 100000121,
  signedat: '22222',
  sign: 'caf44a44efdf8d28f08441b67fda83d8283d9',
  username: '1'
})

## 参数sign生成规则如下:
序号 规则
1 按参数名升序排列
2 然后按参数名1+参数值+参数名2+参数值拼接
3 在首尾各加上secret_key
4 计算md5作为sign

以上参数sign由PHP生成,其生成规则如下:

<?php
$secret_key = "f145b675f441cc00dd3e55746a0f4780";
$params = [
    "roomid"=> "123456789",
    "account"=> "12345",
    "username"=> "zhangsan",
    "app_key"=> "3eb72619af748d73f7fda1e6b0c692a9",
    "signedat"=> "1484620708"
];
// 按参数名升序排列
ksort($params);
// 将键值组合
array_walk($params,function(&$value,$key){
	$value = $key . $value;
});
// 拼接,在首尾各加上$secret_key,计算MD5值
$sign = md5($secret_key . implode('',$params) . $secret_key);
// 结果形如
// $sign=md5("f145b675f441cc00dd3e55746a0f4780account12345app_key3eb72619af748d73f7fda1e6b0c692a9emailzhangsan@vhall.comroomid123456789signedat1484620708usernamezhangsanf145b675f441cc00dd3e55746a0f4780");
// 计算结果
// $sign = '92eec52c58b9bddc0ba663c75a3c1f7f'; //签名有效期只有一个小时

参数sign由JS生成,其生成规则如下:

createSign() {
	//时间戳
	let unix = String(Math.round(new Date().getTime() / 1000));
	//参与计算的参数(参数名按照升序排列)
	let $params = {
	  "account": 'test',
	  "app_key": 'ad493af2fdc36bffbd8515554c85ab8e',
	  "roomid": '565508300',
	  "signedat": unix,
	  "username": 'test'
	};
	let $value = "";
	for (let key in $params) {
	  $value += key + $params[key]; //然后按参数名1+参数值+参数名2+参数值拼接
	}
	//在首尾各加上secret_key
	let $value1 = this.secretkey + $value + this.secretkey;
	console.log($value1);
	//计算md5作为sign, 此处需要引入MD5插件如(ts-md5)
	return Md5.hashStr($value1);
}

tips: 其中changePlaySource切源参数可选,currentLineIndex要切到的线路下标,currentQuality要切换的视频画质下标
//切到第一个线路
myPlugin.changePlaySource({
  currentLineIndex:0
});
//切到第一个画质播放
myPlugin.changePlaySource({
  currentQuality:0
});