• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

playerJs: 用canvas实现视频播放效果。当然,只能算是伪视频播放器,因为,它只是针对 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

playerJs

开源软件地址:

https://gitee.com/Bping/playerJs

开源软件介绍:

playerJs

canvas player

用canvas实现视频播放效果。当然,只能算是伪视频播放器,因为,它只是针对特定的数据格式。给每一个画图动作都赋予时间戳,一连贯的基于时间的画图动作呈现出来,再加上音频的同步播放,就有了视频播放的效果。

code Coverage

##目录

##项目目录

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高              });  

##视频数据格式说明

code Coverage

视频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: 按图片大小进行加载.(需根据屏幕比进行缩放)]

demo.json:

{  "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" 相对视频始点的偏移时间戳,单位:毫秒   }}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
kenvim: 支持PHP5.3的VIM IDE发布时间:2022-03-25
下一篇:
skyeditor: skyeditor 简洁的手机端web富文本编辑器html5发布时间:2022-03-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap