网页嵌入参考 官网开发者

产品介绍    

简介

网页嵌入功能为用户提供了将视频直接嵌入自己网站的功能，用户通过获取微吼提供的网页嵌入链接，并按照文档进行参数配置即可实现在网页内任意位置嵌入视频直播，在缩短用户的开发周期的同时，节省了用户的开发成本。 重要提示：请不要将单视频嵌入和JSSDK混用，否则并发将被统计为双倍。

主要功能

分类 功能 描述
直播 播放器观看 支持直播播放端嵌入，可在播放端观看直播、回看相关内容
问答嵌入 问答 支持页面中任意位置嵌入问答

第三方K值验证    

背景

Vhall网络直播在不涉及权限控制，认证方采用接口的方式即可，可通过如下页面进行设置：http://e.vhall.com/webinar/auth/自己的活动ID， 基本可以满足集成的要求,如需涉及权限控制，Vhall提供以下认证流程来实现简单的权限认证过程。

认证流程

流程说明

1.开启设置

1）全局设置： 针对所有的活动配置生效，如果针对单个活动再做配置，以单个活动配置为最终配置。接口调用设置接口： webinar/whole- auth-url 全局配置第三方K值验证URL

2） 针对某个活动的配置方式一：通过页面配置 http://e.vhall.com/webinar/auth/123456789 ，数字表示自己帐号下的活动id

3）针对某个活动的配置方式二：通过接口(webinar/create或webinar/update)设置

4）接口参数：use_global_k ，默认为0不开启，1为开启，是否针对此活动开启全局K值配置；当设置为0后，则以单个活动的配置为最终配置。

2.Vhall接口URL中请务必带上k参数，如果这个参数为空或者没有这个参数，则视为认证失败

3.Vhall系统收到用户的接口访问请求后，会向第三方认证URL(auth_url)发送HTTP POST请求，同时将email和k值作为POST数据提交 给第三方认证。由第三方系统验证k值的合法性。如果认证通过，第三方认证URL(auth_url)返回无bom字符串pass,否则的返回fail

注：需要确保您的回调地址支持 multipart/form-data 方式接收 post 数据。

4.Vhall 系统根据第三方认证URL返回值判断认证是否成功。只有收到pass，才能认定为验证成功，否则一律跳转到指定的认证失败 URL，或者提示'非法访问'

参数特征

URL请求很容易被探测截获，这就要求第三方系统生成的K值必须有以下特征：

  1. 唯一性：每次调用接口必须产生不同的K值

  2. 时效性：设定一个时间范围，超时的K值即失效。

  3. 如果包含有第三方系统内部信息，必须加密和混淆过。

建议的K值实现

第三方系统可以考虑K值元素包括：用户ID、Vhall直播ID、时间戳（1970-01-01至今的秒数）元素组合后加密后，使用Base64或者hex 匹配成URL可识别编码。K值在第三方系统中持久化或放在Cache中回调验证时，根据时间戳判断是否在设定时间内有效验证结束，若认证通过，则从DB或Cache中移除K值DB或Cache建议有时效性控制，自动失效或定期清理过期数据

直播嵌入    

URL

https://live.vhall.com/webinar/inituser/123456789?email=test@vhall.com&name=visitor&k=随机字符串&state=随机字符串

注：数字123456789表示活动id

URL参数

1） email:可选参数

如果不填写系统会随机生成邮箱地址。 由于保证email自身的唯一性，我 们推荐使用email来作为唯一标识有效用户的字段。对于第三方自有用 户数据的系统，也可以使用一些特征ID作为此标识，请以email的格式组织，比如在第三方系统中，用户ID为123456，可在其后添加一个@domain.com,组成123456@domain.com形式的email地址。

email格式要求：总长度必须小于50个字符，且可以通过下列正则表达式校验

'' ^[a-z’A-Z’0-9]+([.-][a-z’A-Z’0-9]+)*@([a-zA-Z0-9]+([.-][a-zA-Z0-9]+)+)+$''

对于不符合上述两个条件的email,系统会使用随机生成的email地址代替用户输入的参数

注：请务必保证email填写的唯一性！

2） name: 可选参数

如果不填写系统会随机生成。此字段表示用户昵称、姓名或其他有意义的字符串。可以为中文，但必须为UTF-8，且经过URL编码(urlencode)。

3） hideVideoControlBar:可选参数

观看直播时显示/隐藏控制栏，1表示隐藏，0表示显示。

4）mute: 可选参数

默认mute=0表示打开网页观看时默认开启声音，mute=1时没有开启声音，用户可手动再次开启。

5） embed: 可选参数

embed=video表示只显示播放器模块。

注：手机端嵌入页面时，目前只支持两种方式：没有embed参数（显示视频、文档、聊天）和embed=video（只显示视频）

6） k： 可选参数

此字段为了提供给第三方可以根据自己的权限系统，验证客户是否可访问直播地址，具体说明参考“三、第三方K值验证”。

7）state：可选参数

此字段必须要配合K值验证一起使用，且已配置K值验证失败跳转url。当验证失败时在跳转的url后面增加该参数。

8） rid： 可选参数

此字段为了设置回放视频id，回放视频id在控制台的回放管理里可查看到。

问答嵌入    

URL

https://e.vhall.com/webinar/qa?id=123456789&account=123456&name=visitor&signed_at=1474617658&app_key=11111&sign=17e3dcb69

URL参数

1） id:必填参数

创建活动得到的九位数活动id

2） account: 必填参数

第三方唯一识别ID。

3） name: 必填参数

此字段表示用户昵称、姓名或其他有意义的字符串。可以为中文，但必须 为UTF-8，且经过URL编码(urlencode)。

4） signed_at:必填参数

签名生成时间戳，签名有效期一个小时。

5）app_key: 必填参数

从此页面获取API/SDK的使用权限信息：点击查看

6） sign: 必填参数

签名，用于验证链接的有效性，签名生成规则详见API调用说明 三、接口定义5. 签名方式调用 （此接口只存在签名方式调用一种，auth_type 可以省略）

DEMO    

观看端嵌入

<head>
    <title>`DEMO`</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script src='https://cnstatic01.e.vhall.com/static/js/iframeSolu.js'></script>
</head>
    <body style="height:100%">
    <iframe border="0" allowfullscreen='true' src="https://e.vhall.com/webinar/inituser/123456789?email=test@vhall.com&name=visitor" width="800" height="600"></iframe>
    </body>

微信嵌入    

微信嵌入

1、复制链接

“我的主页”汇集了用户的直播和专题，“观看直播”为单场直播，根据需求选择一种进行链接复制。

2、进入公众号后台的菜单设置，把链接复制到公众号的自定义菜单

手机端嵌入页标准及常见问题    

手机端嵌入页标准及常见问题总结（长期更新）

Tips： 1、不要进行多层嵌套，一层就可以了。多层嵌套容易出现以下问题：忘记添加属性和js及一些未知问题
2、嵌入页在外层必须增加：https://cnstatic01.e.vhall.com/static/js/iframeSolu.js， 此js是为了解决2个问题：ios嵌入情况下长按图片无法识别、ios和Android在某些机型上弹起软键盘不下滑的问题。


3、嵌入DEMO示例链接： https://www.vhall.com/saas/doc/162.html

手机wap端的嵌入标准

1、完全嵌入

完全嵌入适合在一个新的窗口打开，不适合在一个窗口内单独开辟一个小窗口使用嵌入：

常见问题： （1）小屏手机存在上下滑动时滑不动的问题 ——原因：上下滑动时进入到了嵌入页，然后导致页面只能在嵌入页显示和操作

（2）部分手机存在显示不全的问题，如底部聊天区域不全 ——原因：嵌入页有一定的高度，外层容器提供的高度过低。需要将外层容器高度调整

（3）嵌入的页面，tab页文案不展示 ——原因：手机wap端未增加基本meta配置（2020-07-21补充）
2、单视频嵌入

单视频嵌入适合在当前窗口内给予一定宽度容器内进行展示，此展示方式不存在消息建立，没有聊天和互动等功能，只能进行视频播放。

常见问题：

（1）若果遇到给予的宽高容器右侧出现滚动条，则表明此容器高度低于嵌入的高度（ 解决方案：需要将外层容器高度增加，建议高度不低于422px）

（2）、嵌入的视频进行播放，发现无法全屏 ——原因：外层有没有添加允许全屏的属性，需要增加：allowfullscreen="true"

小程序嵌入指南    

小程序嵌入 指南

因 小程序网页嵌入，是我司 增值服务功能。 如需开通请跟商务联系。

准备工作

A1 业务域名增加

  1. 登录小程序管理后台， 点击左侧开发连接。进入如下页面 。

  1. 点击二级导航 开发设置菜单

  2. 找到业务域名， 点击添加或修改。 打开如下弹窗。

  1. 下载校验文件，同步给我司 商务人员，由商务人员发起内部流程。放入微吼 官方服务器，并提供绑定域名。

代码开发

B1 小程序代码编写

在小程序内，新建 小程序页面。 增加 小程序web-view 组件的引入。


 <web-view class="container" src="{{ url }}"></web-view>

小程序，官方参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

嵌入指南

  1. 嵌入URL

    https://domain/webinar/inituser/123456789

    domain 为 微吼商务侧，提供给您的小程序嵌入域名。

**2 ** 嵌入支持参数

2.1 email:可选参数

如果不填写系统会随机生成邮箱地址。 由于保证email自身的唯一性，我 们推荐使用email来作为唯一标识有效用户的字段。对于第三方自有用 户数据的系统，也可以使用一些特征ID作为此标识，请以email的格式组织，比如在第三方系统中，用户ID为123456，可在其后添加一个@domain.com,组成123456@domain.com形式的email地址。

email格式要求：总长度必须小于50个字符，且可以通过下列正则表达式校验

'' ^[a-z’A-Z’0-9]+([.-][a-z’A-Z’0-9]+)*@([a-zA-Z0-9]+([.-][a-zA-Z0-9]+)+)+$''

对于不符合上述两个条件的email,系统会使用随机生成的email地址代替用户输入的参数

注：请务必保证email填写的唯一性！

2.2 name: 可选参数

如果不填写系统会随机生成。此字段表示用户昵称、姓名或其他有意义的字符串。可以为中文，但必须为UTF-8，且经过URL编码(urlencode)。

2.3 hideVideoControlBar:可选参数

观看直播时显示/隐藏控制栏，1表示隐藏，0表示显示。

2.4 mute: 可选参数

默认mute=0表示打开网页观看时默认开启声音，mute=1时没有开启声音，用户可手动再次开启。

2.5 embed: 可选参数

embed=video表示只显示播放器模块。

2.6 k： 可选参数

此字段为了提供给第三方可以根据自己的权限系统，验证客户是否可访问直播地址，具体说明参考“三、第三方K值验证”。

2.7 state：可选参数

此字段必须要配合K值验证一起使用，且已配置K值验证失败跳转url。当验证失败时在跳转的url后面增加该参数。

2.8 rid： 可选参数

此字段为了设置回放视频id，回放视频id在控制台的回放管理里可查看到。

FAQ

  1. 小程序嵌入 不支持报名表单功能 、 不支持 打赏功能
  2. 小程序嵌入,H5 类型活动支持 文档演示类型，包括 PDF 、word、 Jpg、excel 。