互动视频开发

组件设计与组件设计

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

组件是互动视频的核心,所有的互动都是通过组件来完成。

组件设计

组件需要满足以下几点

  1. 支持多端(手机,平板,电脑,电视,智慧屏等)识别,如果播放平台不支持的组件,则不显示组件,并且有默认的选项让视频完整播放。
  2. 支持自定义组件,因此视频打包时需要把所需的组件代码全部打包在一起,以供播放器调用。
  3. 每个组件相互独立,后续可支持组件市场,让有能力的开发者创建优秀的组件并出售
  4. 为了安全起见,所有的自定义组件需要官方审核通过后才能在播放器里使用(待定)

组件代码文件目录

组件目录命名全部使用小写字母加下划线,如支付组件目录名为:payment。目录下可有以下文件:

文件 必需 说明
info.json 组件描述文件,如组件名称,开发者,视频配置参数等
play.html 播放器互动文件,用于播放视频时显现的互动界面及相关操作,是用户互动的主体
editor.html 参数配置文件,用于在互动视频编辑器配置组件所需的相关参数
plug.js 组件JS文件,内容可以为空,但文件一定要存在
plug.css 组件CSS文件,内容可以为空,但文件一定要存在
images 图片资源文件目录

组件也可以根据需要增加其它文件,然后在上面的html,js或css文件中引入即可。

info.json文件说明

文件 必需 说明
name 组件名称,如果是自定义组件,请注意不要重名
authorName 开发者名称
authorUrl 开发者联系方式,如网址,邮箱等
describe 组件描述
place 组件出现的位置
animation 组件出现的动画
suspend 组件出现时视频是否暂停,值支持:true (暂停,默认值) false 不暂停
data 组件参数,在互动视频编辑器里配置的组件参数将保存在这里,它以key-value的方式保存

place支持的值如下

  • bottom 从底部向上滑出,底边贴在底部上,默认值
  • top 从顶部向下滑出,顶边贴在顶部上
  • left 从左向右滑出,左边贴在左部上
  • right 从右部向左滑出,右边贴在右部上
  • center 从中间向四周滑出,中心点在中单位

animation支持的值如下

  • normal:正常,默认值
  • fast: 快速
  • slow:慢速
  • none: 无动画效果
  • 200: 具体数字,单位为毫秒
{
    "name": "分支剧情",
    "authorName": "小韦云",
    "authorUrl": "https://www.bctos.cn",
    "describe": "可根据用户不同的选择决定不同的剧情",
    "place": "bottom",
    "animation": "normal",
    "suspend": true,
    "data": [
            "A": "video1",
            "B": "video2"
        ]
}

play.html文件说明

在HTMLS里支持两个特殊的变量

__STATIC__ 核心系统的静态资源路径
__PLUG__ 当前组件的路径

默认情况,播放器和编辑器都已经集成了jquery和layui两个框架,可以直接在html中引用,详细说明见注释

<!--加载jquery-->
<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<!--加载layui-->
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css"></link>
<script type="text/javascript" src="__STATIC__/layui/layui.all.js"></script>

<!--加载组件的css和js-->
<link rel="stylesheet" href="__PLUG__/plug.css"></link>
<script type="text/javascript" src="__PLUG__/plug.js"></script>


<!--渲染互动组件HTML-->
<div class="plug-box">

</div>

<!--渲染互动组件js-->
<script type="text/javascript">
//同步加载json文件
var infoJson = {}
$.ajaxSettings.async = false;
$.getJSON("__PLUG__/info.json",function(data){
    infoJson = data
})
</script>

本文由小韦云原创,转载请注明出处:https://www.bctos.cn/doc/17/1948,否则追究其法律责任

关键词:组件设计 组件设计

广告位招商