利用ckplayer浏览器在线播放视频并获取视频预览图方法

ckplayer是一个不错的播放器，集成了倍速播放、进度条加载预览图这两个 对我来说刚性需求的功能。

这播放器 首选h5播放器、然后再调用flashplayer。

引入的方式还是比较简单，示例有iframe的方式，之前项目是用vue，就用iframe的方式。播放成功，组件加载完成。

完成第一步。

第二步：

传值给iframe组件，这样在调用页面给值，ckpleryer里面加载对应的视频及图片地址。

vue给iframe传值的方式就是 ref类,  js  用 this.$refs.<divID>.<params>=XXx 给值就行

子页面ckplayer的 definition.html里面 用 window.<params> 就可以获取值。 这就可以简单的成功调用并在父页面给值。

到这步，正常播放、跳转、倍速播放等就没问题了。

第三步：

进度条预览图 功能，这个功能来说，对今天必备的功能了。 在网上搜，也没多少介绍这个功能的分享及探讨。

从ckplayer的目录来看，预览图 是2张图，里面包含10×10的小图。 难道这些小图是可以单独读出来的？ 后来确实证实了这个判定，搜一下，图片的确有这属性， 可以合并，然后分开读。

然后找了好一段时间，如何对对视频每秒截张图。 基本就是openCV，或直接调用ffmpeg命令的方式。

我后台java的， 想找 对视频每秒截图 然后合并的 代码，但只有 截图的，合并的是另一单独的主题，没有 一个符合的 统一示例。 

后来还是找到了，直接用ffmpeg命令的方式， 就是一条简单的命令，就可以实现了。这是我要的实现方式。

java里用调用 ffmpep软件，然后 给命令就行了，command.add()....

就这条命令:

ffmpeg -y -i temp.mp4 -vf "fps=1/2,scale=iw/4:-1,tile=10x10" -an %d.png

好不容易找到的教程：http://baijiahao.baidu.com/s?id=1589977043557175158&wfr=spider&for=pc

最终截图结果如下

这样，父页面 给定 图片参数，ckplayer定义好的，加载这张图片就可以 在进度条上 每秒视频截图对应了。

虽然没什么技术含量，网上没多少分享，也可能正是没多少技术含量，才没什么博客分享吧。。。