{"_id":"canvid","_rev":"12-0c108a938d692d425953fb7c7e338e2d","name":"canvid","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","dist-tags":{"latest":"1.6.0"},"versions":{"1.0.0":{"name":"canvid","version":"1.0.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"MIT","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","dependencies":{"queue-async":"^1.0.7"},"gitHead":"6d73c1e6003f03fa64d710271e20c6518753a3c6","_id":"canvid@1.0.0","_shasum":"2f022fc03f887a8e55d5f48662e00a8cb6afb9bf","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"2f022fc03f887a8e55d5f48662e00a8cb6afb9bf","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.0.0.tgz","integrity":"sha512-9b6qI5WKM6WIuqQPFzR+858Ixf1VqC1ZTwStG1Ckrev+9uRwH3DCsRNZVfplRE45VnOsWFX1hsC4UtIk0y6iTQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpFDeskL3+/Abe8LY1sSSNl2LDjvun2iXNgBYqIAn1CQIhANEplGcEe8n7dHz6EE8FQgTY79VxRhGg85Qil7Ofmrf0"}]}},"1.1.0":{"name":"canvid","version":"1.1.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"MIT","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"1e0796d016bc730247040858659c9f0e2ce919c9","_id":"canvid@1.1.0","_shasum":"5647ff01d7e91696592b728b99452c348e40f259","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"5647ff01d7e91696592b728b99452c348e40f259","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.1.0.tgz","integrity":"sha512-9ZH1NeL0s3q1qFxMsM84mB1l7baip3u/yH/RZ03MJPIT1P4hP8/tArJ1bUy3tZPvzQ2/j+XrS6CNH63rkpD3FA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDU/4rFKBPzxzn9Cc76pSjFoqlI3t5wuRuJGLFIJRcrXAiEAlcBZAemDBckUqdtwdW4EKz6sNO3Gn1m7M3Fk/N6Gk+g="}]}},"1.2.0":{"name":"canvid","version":"1.2.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"29b9af54e893b9ce105fe325adcc219c84aceef3","_id":"canvid@1.2.0","_shasum":"673f6ec48bcb004060304f4367bd9f1c0ffc2941","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"673f6ec48bcb004060304f4367bd9f1c0ffc2941","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.2.0.tgz","integrity":"sha512-G2kSx+XRCq6zrqoscrrsqgSYwhUqE4el+B2rLvOpuKFQEVEi4m9NnuRumGH6NtmuEi4A+NS1H+V8W3lke5ctGA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1t2P9I5Ot7/L6USGHcSjyDaUumAVaZ8X4ENvD9c0V3gIhAIBfhreiBiW1Ho6QJjEfdXd6fF8a2/jAhQB3Sc/42Z06"}]}},"1.3.0":{"name":"canvid","version":"1.3.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"4c131aa33baa92697d306adad7dbe6e542832eef","_id":"canvid@1.3.0","_shasum":"8d312015c9093d2e74d0d833a21a0f4cc386712a","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"8d312015c9093d2e74d0d833a21a0f4cc386712a","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.3.0.tgz","integrity":"sha512-7Jq2x7dc3FVt4nF/78LUNZY4km2uVSmoplG4LOEv4naWkhgUeD00xLA41468epvVMTNl7UGJ0Xp94hSCKe8NCw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb+UgpxinIC1rRbFAO387xtGNWNK02aYEBWIGc2zlRQAIgQhfGzLPsQ/fz78IJGeXY2w2twcvipRkq0Kx1OfbX2s4="}]}},"1.3.2":{"name":"canvid","version":"1.3.2","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"1d65e8a3ba5fcdcef6826aab3a5dee97ae3b06a1","_id":"canvid@1.3.2","_shasum":"068eecb780289cee892479824dfbe5b84c2c2094","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"068eecb780289cee892479824dfbe5b84c2c2094","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.3.2.tgz","integrity":"sha512-JBcHjUlwsJXiifh41NQCvO8LguZ9D842YLIkbw1BRW3I5JDh1RAUIx27INmnFgbW580YBEgL7HJ/x5P7i+D++A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrB3w3ncC2RjdP4OZ7DuCjlOXRQep84pm69l3Oe3BrygIgTLxSOCJVwjmT8bk4SGspRrQXaLqBhAEtGvdeZJ2UJLM="}]}},"1.4.0":{"name":"canvid","version":"1.4.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"a34302174158ed4e0b44438d75a1ce9e9e5c1072","_id":"canvid@1.4.0","_shasum":"f35e10b2046ef4b2e4e9d6b1a8c3ff545d8acc63","_from":".","_npmVersion":"2.14.4","_nodeVersion":"4.1.1","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"dist":{"shasum":"f35e10b2046ef4b2e4e9d6b1a8c3ff545d8acc63","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.4.0.tgz","integrity":"sha512-OtsTw4Evnl6gB6DQrIy73M0VT4p3OkAZ/Z+yVY49tyrzyNPvYbT+/YQhJyMJAzx0s7V1uk4M7A+bPXjQMa51BQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK3Eo/p3ZxNNGgpOub6/wYcxYyECEV3k1QOA0N5ayTdQIhANLfIY1XiWDDewhG+hxGTL+EucDg/Ezk94nC+MrN+6MQ"}]}},"1.5.0":{"name":"canvid","version":"1.5.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"89d3d830db3693b5aab7900f934407dbc1878e13","_id":"canvid@1.5.0","_shasum":"94d7779eaa41fa70d5a8159c8866b2541485a547","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.4.0","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"dist":{"shasum":"94d7779eaa41fa70d5a8159c8866b2541485a547","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.5.0.tgz","integrity":"sha512-2s0+zM/nf2VM9lsPHfcbSMmNALD1Gif8p9JZ+jFo2v2JpSqIMXXqUlJwbn9bBysf2ZXdj/CvFICczXoMMs5i6w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNu9EmVVi57DYmvt4yJCqRq0wKMq+ZlAA+EaBgQX+MkwIhAKxtTbUzXtbJppzk7gRNCl5E7GZ//K4ZND/4nJrwiuys"}]},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"_npmOperationalInternal":{"host":"packages-5-east.internal.npmjs.com","tmp":"tmp/canvid-1.5.0.tgz_1455787042499_0.8639291538856924"}},"1.6.0":{"name":"canvid","version":"1.6.0","description":"canvid is a tiny library for playback of relatively short videos on canvas elements.","main":"canvid.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/gka/canvid.git"},"keywords":["canvas","video","gif"],"author":{"name":"Gregor Aisch"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"license":"ISC","bugs":{"url":"https://github.com/gka/canvid/issues"},"homepage":"https://github.com/gka/canvid","gitHead":"dc09ca5f3c3373417d79b36b2f99a61c7bb9327f","_id":"canvid@1.6.0","_shasum":"492e2c9535ae8f09658f25137c73b8b3250a33c7","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.4.0","_npmUser":{"name":"moklick","email":"info@moritzklack.com"},"dist":{"shasum":"492e2c9535ae8f09658f25137c73b8b3250a33c7","tarball":"https://registry.npmjs.org/canvid/-/canvid-1.6.0.tgz","integrity":"sha512-2pts2X7UiAwC79C4Yzv7LJkAgfqYoPuwllkxty5ErvtjziBIaSFQOhMeuE6sqJvIVHy56zAvikem0Tm6EWg1Ag==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2vsX+hsdfdpX2Vro3OAWFMt3+qxKl5hcaSR683mlQFQIhAIMXF3Gd1b3bJQYJAZsmUrVi22BlA42uWTwpo4UOXgkP"}]},"maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"_npmOperationalInternal":{"host":"packages-5-east.internal.npmjs.com","tmp":"tmp/canvid-1.6.0.tgz_1455787153785_0.9166372267063707"}}},"readme":"# canvid.js\n\n**canvid** is a tiny dependency free library for playback of relatively short videos on canvas elements. \n\n* **Why not just use HTML5 video?**  \n  Because you can't embed and autoplay HTML5 videos on iOS! Yeah, [that sucks](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW4).\n\n* **Why is this better than using an animated GIF?**  \n  Videos look kind of gross when converted to animated GIFs because of the colors sampling. Also the file size of video GIFs can get pretty huge. GIF is just not made for videos. JPG does a much better job of compressing video frames. Also, animated GIFs don't give you any playback controls. You can't pause a GIF or delay it's playback. With canvid you can do that.\n\n* **Why only \"relatively short\" videos?**  \n  As you see further down, the container format for canvid is a big image sprite of all the frames of each clip. Sadly, iOS limits the maximum image size (bigger image get sampled down), so that puts a limit on the maximum frames you can store.\n\n* **Why is there no audio?**  \n  canvid doesn't support audio for the same reason animated GIF doesn't support audio either: because that's not what it was built for. \n\n## Installation\n\n**npm**\n\n```\n$ npm install --save canvid\n```\n\n**git clone**\n\n```\n$ git clone git@github.com:gka/canvid.git\n```\n\n## Usage\n\nYou can use canvid.js with AMD, CommonJS and browser globals.\n\n```js\nvar canvidControl = canvid({\n    selector : '.video',\n    videos: {\n        clip1: { src: 'clip1.jpg', frames: 38, cols: 6, loops: 1, onEnd: function(){\n          console.log('clip1 ended.');\n          canvidControl.play('clip2');\n        }},\n        clip2: { src: 'clip2.jpg', frames: 43, cols: 6, fps: 24 }\n    },\n    width: 500,\n    height: 400,\n    loaded: function() {\n        canvidControl.play('clip1');\n        // reverse playback\n        // canvidControl.play('clip1', true);\n    }\n});\n```\nIf you want to use canvid with [React](https://facebook.github.io/react/) you can check this simple [react + canvid demo](http://codepen.io/moklick/pen/eJgbaL) to see how it works.\n\n## Options\n\n* **videos** required  \n  Video/Sprite objects (videoKey : videoOptions).\n\n  * **src** required  \n    Path of the sprite image.\n  \n  * **frames** required  \n    Number of frames. \n \n  * **cols** required  \n    Number of columns.  \n\n  * **loops** optional  \n    Number of loops.\n\n  * **fps** optional (default: 15)  \n    Frames per second.\n\n  * **onEnd** optional  \n    Function that gets called when the clip ended.\n\n\n* **selector** optional  \n  The selector of the element where the video gets displayed. You can also pass a DOM element as a selector.\n  `default: '.canvid-wrapper'`\n\n* **width** optional  \n  Width of the element where the video gets displayed.  \n  `default: 800`\n\n* **height** optional  \n  Height of the element where the video gets displayed.  \n  `default: 450`\n\n* **loaded** optional  \n  Function that gets called when all videos are loaded.\n\n* **srcGif** optional  \n  Path of the fallback gif, if canvas is not supported.  \n\n\n## Methods\n\nThe canvid function returns an object to control the video:\n\n```js\nvar canvidControl = canvid(canvidOptions);\n```\n\n**play**  \nPlays video of the passed videoKey. The parameters isReverse (default: false) and fps (default: 15) are optional.\n\n```js\ncanvidControl.play(videoKey [,isReverse, fps]);\n```\n\n**pause**  \nPause current video.\n\n```js\ncanvidControl.pause();\n```\n\n**resume**  \nResume current video.\n\n```js\ncanvidControl.resume();\n```\n\n**destroy**  \nStops video and removes the canvas of the current canvid element from the DOM.\n\n```js\ncanvidControl.destroy();\n```\n\n**isPlaying**  \nReturns true or false whether the video is playing or not.\n\n```js\ncanvidControl.isPlaying();\n```\n\n**getCurrentFrame**  \nReturns the current frame number.\n\n```js\ncanvidControl.getCurrentFrame();\n```\n\n**setCurrentFrame**  \nSets the current frame number.\n\n```js\ncanvidControl.setCurrentFrame(0);\n```\n\n## How to convert your video to a JPG sprite\n\nFirst, convert you video into single frames using [ffmpeg](https://www.ffmpeg.org/):\n\n```\nmkdir frames\nffmpeg -i myvideo.mp4 -vf scale=375:-1 -r 5 frames/%04d.png\n```\n\nThen, use ImageMagicks [montage](http://www.imagemagick.org/script/montage.php) to stich all the frames into one big image:\n\n```\nmontage -border 0 -geometry 375x -tile 6x -quality 60% frames/*.png myvideo.jpg\n```\n\n## Is canvid responsive?\n\nYes it is, thanks to a nice little trick. Regardless of what  `width` and `height` parameters you set in the canvid constructor, you can use `style=\"width:100%\"` on the canvas element and it will get scaled to the outer container and preserve its original aspect ratio.\n\n```css\ncanvas.canvid {\n  width: 100%;\n}\n```\n\n## Known Issues\n\nSome users encountered problems on mobile devices with large sprites. A workaround is to split the sprite into multiple sprites.\n\nIf you're experiencing problems with `montage` (e.g. \"unable to read font\") try updating `imagemagick` to the latest version.\n\n## Contributors\n\n* [Gregor Aisch](http://driven-by-data.net)\n* [Moritz Klack](http://moritzklack.com)\n","maintainers":[{"name":"moklick","email":"info@moritzklack.com"}],"time":{"modified":"2022-06-13T05:34:34.390Z","created":"2015-08-08T18:04:21.216Z","1.0.0":"2015-08-08T18:04:21.216Z","1.1.0":"2015-08-09T10:48:39.462Z","1.2.0":"2015-08-12T07:55:08.169Z","1.3.0":"2015-08-12T19:32:52.606Z","1.3.2":"2015-08-18T19:12:08.022Z","1.4.0":"2015-11-06T19:36:25.151Z","1.5.0":"2016-02-18T09:17:24.888Z","1.6.0":"2016-02-18T09:19:16.226Z"},"homepage":"https://github.com/gka/canvid","keywords":["canvas","video","gif"],"repository":{"type":"git","url":"git+https://github.com/gka/canvid.git"},"contributors":[{"name":"Gregor Aisch","url":"http://driven-by-data.net"},{"name":"Moritz Klack","url":"http://moritzklack.com"}],"author":{"name":"Gregor Aisch"},"bugs":{"url":"https://github.com/gka/canvid/issues"},"license":"ISC","readmeFilename":"README.md","users":{"prisme":true,"aitorllj93":true}}