需求
视频相关项目，有时候需要对视频进行截图的，图片一般加上水印。
这里展示下普通视频播放和直播视频播放的加水印方式。
资源
测试需要的视频资源用的 阿里视频中心
video播放视频
一些非直播、不复杂的视频播放需求，直接用这个就好了，特别是一些演示用的项目。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
-
MP4：MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
-
WebM：WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
-
Ogg ：Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
主要实现代码
具体可见 代码
<video id="video1" controls crossOrigin="Anonymous" class="image" width="520" height="320" style="object-fit: fill;"><source :src="url" type="video/mp4">您的浏览器不支持 video 标签。
</video>
captureClick() {const v = document.querySelector('#video1')// v.setAttribute('crossOrigin', 'anonymous')// v.crossOrigin = 'anonymous'const width = v.videoWidthconst height = v.videoHeightconst canvas = window.canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d')ctx.drawImage(v, 0, 0, width, height)ctx.rotate(-16 * Math.PI / 180)ctx.font = '100px 宋体'ctx.fillStyle = 'rgba(255, 255, 255, 1)'ctx.fillText('测试水印', 100, height - 200)const image = canvas.toDataURL('image/png')this.captureImg1 = image
}
效果如下：
Aliplayer播放视频
支持 MP4、FLV、M3U8、MP3 格式的视频，支持H.264编码的视频。
Flash模式下支持 RTMP，但是Flash已经不更新了，就忽略了。详情参考文档
集成进项目可以用 vue-aliplayer-v2，也可以直接参考 文档。
Aliplayer功能展示，这里有代码看，不详细介绍了。
这个播放器本身就自带加水印截图的功能，按文档配置就好了。缺点也很明显，只可以文字，不好定制。需求不复杂的可以用这个。想自定义复杂水印的，可以参考下节 EasyPlayer.js播放视频相关来实现，原理都是一样的。
snapshotWatermark:{left:"100",top:"100",text:"测试水印",font:"italic bold 48px 宋体",strokeColor:"red",fillColor:'green'
}
EasyPlayer.js播放视频
Easyplayer 支持的视频格式就比较全面了，是目前找到的唯一个支持播放 H.265 格式视频的H5播放器 EasyPlayer.js，支持直播
网上使用这个播放器，大多数是用的旧版的方式，这里用的是最新版的方式。
注意：
- 1、目前这个播放器的最新版本，高度没有自动充满父容器，所以通过
scss强行设定下，例如，这里设定320px的高度（对应的选择器，用谷歌浏览器的开发者工具，看Elements就可以找到）
::v-deep .video-wrapper {padding-bottom: 0px !important;height: 320px !important;
}
- 2、视频播放的截图，
video都需要配置下跨域。所有第三方的H5视频播放器，找到对应的video对象设置下便可，原理都一样的。例如，Easyplayer.js的跨域设置如下：
this.player2 = this.$refs['video2'].player.el_.children[0]
this.player2.setAttribute('crossOrigin', 'Anonymous')
此设置一定要在截图前设置好，不然不生效的。
主要实现代码
具体可见 代码
<EasyPlayerref="video2"class="video-view":video-url="url":stretch="true"liveautoplayfluent />
captureClick2() {const width = this.player2.videoWidthconst height = this.player2.videoHeightconst canvas = window.canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d')ctx.drawImage(this.player2, 0, 0, width, height)ctx.rotate(-16 * Math.PI / 180)ctx.font = '100px 宋体'ctx.fillStyle = 'rgba(255, 255, 255, 1)'ctx.fillText('测试水印', 100, height - 200)const image = canvas.toDataURL('image/png')this.captureImg2 = image
}
效果如下：
代码总览
涉及的文件如下（具体参考代码）：
|-- src|-- views|-- videoCaptureTest // 实例所在|-- index.vue|-- index.scss|-- index.js
代码
按代码总览的目录去代码里找着看就行了。
总结
以上，只是简单的展示了文字水印，想实现复杂的，参考canvas方法就行了，文字旋转、图片等都是可以的。
