Vue视频播放进行+水印的截图

需求

视频相关项目，有时候需要对视频进行截图的，图片一般加上水印。

这里展示下普通视频播放和直播视频播放的加水印方式。

资源

测试需要的视频资源用的阿里视频中心

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方法就行了，文字旋转、图片等都是可以的。