交互式视频

可使用交互式视频定义播放器上一组交互区,允许用户与视频交互触发附加功能例子例子说明如何使用:

• 放大视频区域,切换源码缩放版
• 链接用户网页内容
• 打开对话框或触发其他功能

添加交互区

向视频播放器添加交互区通过添加实现interactionAreas对象设置视频源

上头interactionAreas对象添加相关配置允许:

• 定义每个交互区位置使用模板化,avt文件或手工集.
• 点点事件处理程序实现功能化视频缩放.

可同时使用配置交互式视频UI适合使用案例

添加交互区前,确保已安装视频播放器代码如何嵌入视频播放器基本例子如下:

使用模板

使用模板设置交互区时,先添加区间参数并设置增强功能属性变真模板化属性或“纵向”、“横向”、“全部”或“中心”。模板定义使用a.vt文件.可使用下文示例文件中的一个基础创建自己的文件vt文件:

• 画像定义三区垂直线
• 风景定义三区横向线
• 全部定义一区可点击整个视频
• 中心点定义集中定位区

内含二维或二维或二维或二维或二维或二维或二维或二维或二维或二维或二维或二维或三维或二维或三维或三维或二维或二维或二维或三维或二维或三维或二维或三维或三维或二维或三维或三维或三维或三维上克隆事件处理程序处理交互Area点击时的行为例举 :

使用 vt文件

使用.vt文件设置vtell属性到URL.vt文件.例举 :

可查找示例.vt内文件模板化外段和更多资料使用参数.vt内文件manualInteractionAreaProps表格引用

人工定义区域

手动设置交互区时设置值模板化属性数组manualInteractionArea对象详解允许您定义每个交互区的位置

完全例子传递interactionAreas设置视频播放器源码时对象 :

看manualInteractionAreaProps表格引用更多参数信息

视频缩放

交互视频使用大例之一是允许用户放大视频缩放可用两种方式实现,两种方式都使用缩放方法解析上克隆事件交互区

• 基础缩放提供标准数字缩放视频,调用方法无附加选项
• 更高级缩放可提供不同的视频源选用调用缩放方法论不同源可增强高质量视频提供丰富经验外源可设置为下文示例显示对象

点击下方视频观察UI实战

示例显示基本缩放功能需要配置

举个例子说明更高级缩放功能需要配置源定义匹配ID定义模板vt文件并用鼠标切换右源码

完全代码为例

配置交互式视频UI

UI使用交互式视频时启动的UI可配置匹配需求interactionDisplay构造器参数可设置 :

• 主题选项用于交互领域本身定义模板使用时,可能的选项为“插件”(默认)或“影子化”。
• 布局选项使用UI玩家加载可定义是否允许UI叠加和是否再次显示提示

例子显示使用配置改变交互区并恢复显示提示

代码探索者:视频交互

下示例显示执行交互式视频所需的全码并包括视频缩放功能和简单javascript警告沙盒写为React, JavaScript配置分离成自己的文件

点击下方视频观察UI实战

引用

玩家参数

interactionDisplay

百合	类型	描述性
主题化	主题Props	主题设置交互区
布局设计	布局程序	交互区UI设置

源参数

interactionAreas

百合	类型	描述性
增强功能	布尔	是否激活交互区需求化激活功能
模板化	字符串或数组manualInteractionAreaProps	模板名使用或数组人工定义交互区可能的值 :画像,风景,全部,中心点.
vtell	字符串URL	URLvt文件定义所需交互区
上克隆	函数转换	函数点击交互区时调用
同步Offset时间	布尔	是否同步交互区视频开始播放与原创视频相同偏移(点时)或从视频起始原创交互区视频内容相同并缩放时有用注意如果视频持续时间不完全相同,结果会变得不可预知默认值 :虚伪

类型类型

主题Props

百合	类型	描述性
模板化	字符串	模板用于视觉显示交互区可能的值 :脉冲,隐蔽.默认值 :脉冲

布局程序

百合	类型	描述性
增强功能	布尔	是否启用前和后滚交互区UI默认值 :真实性
重新显示	布尔	前后滚动交互区UI是否允许再次提示默认值 :虚伪

manualInteractionAreaProps

百合	类型	描述性
左转	数目	偏左位置占视频剩余宽度的百分比(自交互区宽度减值后),例如10
顶部	数目	自顶偏移位置为视频剩余高度百分比(自交互区高度减法后),例如10
宽度	数目	宽度交互区百分比视频图标表示区域宽度不增.例如80
高度显示	数目	交互区高度比视频高图标表示区域不增高度.例如40码
标识符	字符串	区间交互识别.例如顶层源码