canvid.js 教程

HTML5 herman 1192浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

很少有人关注canvid.js,大部分人可能还没发现这个js类库。我就只在知乎上看到有人关于它的评论《如何评价canvid.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的。

参考资料

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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