canvas player
用canvas实现视频播放效果。当然,只能算是伪视频播放器,因为,它只是针对特定的数据格式。给每一个画图动作都赋予时间戳,一连贯的基于时间的画图动作呈现出来,再加上音频的同步播放,就有了视频播放的效果。
##目录
##项目目录
playerJs/ -->
css/ --> css 文件 (*必须)
index.css --> default stylesheet
res/ --> 资源文件,包括图片 (*必须)
close.png -->
loading.gif -->
src/ -->
coreJs.js --> 核心代码。数据解析, 视频播放,音频播放等处理
playJs.js --> ui控制代码。根据相应的动作更新页面和监控页面事件
utilJs.js --> 通用工具类。
demo.json --> 视频数据示例
example.html --> 例子
player-*.min.js --> 源码压缩代码。所有js压缩,所以,使用时引用此文件即可 (*必须)
video.html --> 播放器html (*必须)
##兼容性
- 浏览器:IE9+ Edge12+ Chorme43+ firebox41+ Safari8+ Opera33+
- audio : mp3|wav mp3 兼容性最好.
- IE 不支持wav格式,但Edge支持。
##使用
//html <script type="text/javascript" src="XXX/player-0.9.min.js"></script>
videoUI.startup({
root: '../', //此插件根目录
url: '', //视频数据来源
volume: 50, //默认音量大小。0-100
"vw": 600, //视口宽
"vh": 400, //视口高
"cw": 600, // 底层canvas宽
"ch": 3200, // 底层canvas高
});
##视频数据格式说明
视频trace的格式定义:
第一行: 屏幕尺寸|trace版本
最后一行: 整个视频的时长.[毫秒]
回放 Trace 条目的定义...
timestamp&(userType|screenOffset|action|color|pointX|pointY|time|pressure)
&(userType|screenOffset|action|color|pointX|pointY|time|pressure)
单个条目详细解释如下:
timestamp
当前操作的偏移时间[与连接开始的时间偏移], 由服务器设置userType 当前数据来源
action
Down(0)|Move(2)|Up(1)|Cancel(3)|SCREEN_JUMP(5)|Image(9) 其中括号内的是具体的值.color(AARRGGBB) int 值,当前点的颜色
pointX
当前点的X值
pointY
当前点的Y值time 当前事件发生的时间
pressure 当前事件的压力.
screenOffset
屏幕的偏移百分比, 相对于屏幕高度.[单屏高度为100]Note:
关于 action 复用的定义如下.
当值为 [0,3] 时, 是正常的划线操作.
当值为 [5] 时, 是表示对屏幕的移动操作. 后面的字段全部不存在.
此时trace的格式为
timestamp
|userType|screenOffset
|action
当值为 [9] 时, 是表示加入图片. 后面的字段全部不存在, 如果不够则继续添加.
格式如下:
图片名
*pointX
*pointY
*模式mode
*屏幕索引screenIndex
|图片名
*pointX
*pointY
*模式
*屏幕索引
|图片名
*pointX
*pointY
*模式
*屏幕索引
,图片的索引从1开始
其中模式: [0: 铺满屏幕(最大一个页面)| 1: 按图片大小进行加载.(需根据屏幕比进行缩放)]
{
"responseNo": 0, //返回码
"videoData": { //视频数据
"imgPath": "./res/", //图片根目录
"audioUrl": "./res/Audio.mp3", //音频地址
"screenSize": { //屏幕尺寸
"w": 150,
"h": 100
},
"traceData": [ //帧数据
{
"timestamp": 500, //时间戳
"data": [ //具体画图动作
{
"userType": 1,
"screenOffset": 0, // 屏幕偏移。以页面值为100,也是一个视口的高度。 具体偏移量= (screenOffset/100)*view.heigth
"action": 9, //画图片动作
"imgName": "01201512021516100015.jpg", //图片名字。图片地址=imgPath+imgName
"pointX": 0, //画图起点X
"pointY": 0, //画图起点Y
"mode": 1, //0:铺满一页,1:按图片大小缩放。Notice:无论哪种模式,图片至多显示在一个页面上
"screenIndex": 0 //页面偏移量,相对整个页面。假如screenIndex=1,则表示此图画在第二个页面,以此类推。
//**Notice**:一个视口的大小就是一个页面大小。
}
]
},
{
"timestamp": 1000, //时间戳
"data": [ //具体动作数据
{
"userType": 1,
"screenOffset": 0,
"action": 0, //动作 0:按下画笔,2:画笔移动画线,1:移开画笔,停止画线
"pointX": 75,
"pointY": 60,
},
]
}
{
"timestamp": 5500,
"data": [
{
"userType": 1,
"screenOffset": 0, //视口移动偏移量
"action": 5 //视口移动
}
]
}
],
"duration": 6000 //视频总时间长 单位:毫秒
//**Notice**:"timestamp" 相对视频始点的偏移时间戳,单位:毫秒
}
}