集RTMP、HLS、FLV,、WebSocket 于一身的网页直播/点播播放器EasyPlayer.js截取快照的方法分享

EasyPlayer几乎涵盖了开发者所需的全部平台，尤其是在web端的EasyPlayer.js，极大地方便了开发者在解决B/S型业务开发时遇到的播放器接入的问题，比如：不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等。EasyPlayer.js适时地推出了一款非常优秀的工具页面，集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大，不论是测试，还是被集成，都很方便！

EasyPlayer.js如何实现截取快照？

分析问题

如何实现点击上图中圈出来的按钮生成一个快照？

首先在播放器实例化时在控制栏添加一个按钮并绑定一个点击事件，此事件的作用是生成此时的快照并下载到本地。此功能最大的难点就在于如何生成将video标签里面的内容生成一张图片。可以通过canvas来生成图片。

解决问题

此段代码就是先获取video标签，然后通过canvas来绘制图片。