网页上的播放器一般由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,否则追究其法律责任
关键词:互动视频 网页播放器