canvid.js 教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

很少有人关注canvid.js，大部分人可能还没发现这个js类库。我就只在知乎上看到有人关于它的评论《如何评价canvid.js？》。

canvid.js是什么

canvid.js是一款用于在画布元素上播放视频的小插件。canvid是一个开源库，用于播放画布元素上相对较短的视频。

canvid.js的特点

• 和HTML5相比，它可以在iOS上嵌入和自动播放HTML5视频。
• JPG在压缩视频帧方面做得更好。动画GIF不会给您任何播放控制。您无法暂停GIF或延迟播放。用canvid你可以做到这一点。
• canvid比较适合小视频，原因是iOS限制了最大图像大小。
• 动画GIF不支持音频，canvid也不支持音频。
• 相同内容，比GIF小。

使用下面的命令创建GIF：

ffmpeg -i myvideo.mp4 -vf scale=375:-1 -r 5 frames/%04d.png
convert -loop 0 -delay 5 -colors 75 frames/*.png -fuzz "40%" output.gif

canvid安装

NPM方式

npm install --save canvid

git clone方式

git clone git@github.com:gka/canvid.git

用法

您可以使用canvid.js与AMD，CommonJS和浏览器全局变量。

var canvidControl = canvid({
    selector : '.video',
    videos: {
        clip1: { src: 'clip1.jpg', frames: 38, cols: 6, loops: 1, onEnd: function(){
          console.log('clip1 ended.');
          canvidControl.play('clip2');
        }},
        clip2: { src: 'clip2.jpg', frames: 43, cols: 6, fps: 24 }
    },
    width: 500,
    height: 400,
    loaded: function() {
        canvidControl.play('clip1');
        // reverse playback
        // canvidControl.play('clip1', true);
    }
});

如果你想用React使用canvid，你可以检查这个简单的react + canvid demo看看它是如何工作的。

参数说明

• videos：Video / Sprite对象（videoKey：videoOptions）。
• selector：可选（默认值：'.canvid-wrapper'） ，显示视频的元素的选择器。
• width：可选（默认值：800） ，视频显示的元素的宽度。
• height：可选（默认值：450），视频显示元素的高度。
• loaded：可选，在加载所有视频时调用。
• srcGif：路径的后备GIF，如果不支持canvas。

videos 对象的属性说明如下：

• src：必需，sprite图像的路径。
• frames：必须，帧数。
• cols：必须，列数。
• loops：可选 循环播放次数。
• fps：可选（默认值：15） ，每秒帧数。
• onEnd可选，当剪辑结束时被调用。

方法说明

Canvid函数返回一个对象来控制视频：

var canvidControl = canvid(canvidOptions);

播放通过的视频的视频。参数isReverse（默认值：false）和fps（默认值：15）是可选的。

canvidControl.play(videoKey [,isReverse, fps]);

暂停当前​​视频。

canvidControl.pause();

恢复当前视频。

canvidControl.resume();

停止视频并从DOM中移除当前canvid元素的画布。

canvidControl.destroy();

返回视频播放还是暂停状态，true或false。

canvidControl.isPlaying();

返回当前帧号。

canvidControl.getCurrentFrame();

设置当前帧号。

canvidControl.setCurrentFrame(0);

如何将视频转换为JPG

使用ffmpeg将视频转换为单个帧：

ffmpeg -i myvideo.mp4 -vf scale=375:-1 -r 5 frames/%04d.png

然后，使用ImageMagicks将所有的框架变成一个大图像：

montage -border 0 -geometry 375x -tile 6x -quality 60% frames/*.png myvideo.jpg

注意：canvid是依赖Canvas的。

参考资料

• 使用FFmpeg生成gif动画
• http://gka.github.io/canvid/

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » canvid.js 教程