canvid 是个极小依赖的库,可以在 canvas 元素上播放相对较短的视频。
为什么不直接使用 HTML5 视频? 因为不能嵌入或者在 iOS 自动播放 HTML5 视频
为什么比使用一个动态 GIF 更好? 视频转换成 GIF
效果特别不好,因为颜色的取样关系。同时,视频 GIFs 的大小非常大。GIF 不能转换成视频,动态 GIFs 不能控制播放,不能暂停或者播放,或者延迟播放。
为什么只是 “相对较短” 的视频? iOS 限制图片的大小上限
为什么没有音频? canvid 不支持音频,因为动态 GIF 也不支持
npm
$ npm install --save canvid
git clone
$ git clone [email protected]:gka/canvid.git
可以在 AMD,CommonJS 和浏览器全局中使用 canvid.js
var canvidControl = canvid({ selector : '.video', videos: { clip1: { src: 'clip1.jpg', frames: 38, cols: 6 }, clip2: { src: 'clip2.jpg', frames: 43, cols: 6, loops: 3 } }, width: 500, height: 400, loaded: function() { canvidControl.play('clip1'); // reverse playback // canvidControl.play('clip1', true); } });