网页上的播放器一般由JS文件+CSS文件+H5代码三部分组件，因此我们的网页互动视频播放器设计如下：

播放器使用

下载并在网页中引入播放器的JS和CSS文件,并引入jquery

<link rel="stylesheet" href="./IVPlayer/player.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./IVPlayer/player.js"></script>

在H5代码中实例一个互动视频播放器

<div id="player-box"></div>

<script>
$(function(){
    var ivp = IVPlayer('#player-box',{
        src:"./test.iv5"
    });
})
</script>

互动视频播放器支持的参数

src：视频地址
controll：是否显示控制组件
width：宽度
heigth：高度
client：客户端

互动视频播放器支持的方法

play()：播放
pause()：暂停
stop()：停止
speed()：加速/减速

互动视频播放器支持的组件

理论上互动视频播放器支持任何H5功能，但为了简化视频创作者难度，我们将提供几个常用的组件，创作者无需任何代码也可以使用这些组件。

剧情分支（或：单选按钮组）
角色视频
扩展视频（花絮，画中画）
预览及付费
播放密码
语音互动
弹幕
分享
点赞
投票
报名

后续还会根据需要提供更多组件，有开发能力的创作者也可以自行增加组件，本质上都是H5的交互，因此所有组件播放器都是支持的。

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

关键词：互动视频 网页播放器