android easyplayer截屏,EasyWasmPlayer H265播放器是如何实现视频截图功能的？

在我们做视频开发的过程中，会遇到不少需求，其中视频截图就是一个比较常见的需求，因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候，我们都会在原有开发的基础上对视频截图进行一些功能拓展。

TSINGSEE青犀视频开发的H265播放器截图功能主要利用canvas实现，用canvas的绘画能力画出视频某一帧的视频画面，获得到图像之后转换成base64图像，再利用a标签实现自动保存到本地。

1、首先在播放器上选一个合适的位置放置截图图标。这边选择在播放器控制栏下加入截图按钮。

实现:

在项目中找到SyncPlayer.js，插入截图按钮样式代码并添加点击监听事件。

//截图

this.snap = document.createElement('span'); // 插入dom盒子用来展示图标

this.snap.classList = "fa fa-camera snap";  // 插入图标class类

this.snap.title = '截图';

this.timeBox.appendChild(this.snap);