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

需求

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

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

资源

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

video播放视频

一些非直播、不复杂的视频播放需求，直接用这个就好了，特别是一些演示用的项目。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

  • MP4：MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

  • WebM：WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

  • Ogg ：Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

主要实现代码

具体可见 代码

1
2
3
4
<video id="video1" controls crossOrigin="Anonymous" class="image" width="520" height="320" style="object-fit: fill;">
  <source :src="url" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
captureClick() {
  const v = document.querySelector('#video1')
  // v.setAttribute('crossOrigin', 'anonymous')
  // v.crossOrigin = 'anonymous'
  const width = v.videoWidth
  const height = v.videoHeight

  const canvas = window.canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height

  const 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播放视频相关来实现，原理都是一样的。

1
2
3
4
5
6
7
8
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就可以找到）
1
2
3
4
::v-deep .video-wrapper {
  padding-bottom: 0px !important;
  height: 320px !important;
}
  • 2、视频播放的截图，video都需要配置下跨域。所有第三方的H5视频播放器，找到对应的video对象设置下便可，原理都一样的。例如，Easyplayer.js的跨域设置如下：
1
2
this.player2 = this.$refs['video2'].player.el_.children[0]
this.player2.setAttribute('crossOrigin', 'Anonymous')

此设置一定要在截图前设置好，不然不生效的。

主要实现代码

具体可见 代码

1
2
3
4
5
6
7
8
<EasyPlayer
  ref="video2"
  class="video-view"
  :video-url="url"
  :stretch="true"
  live
  autoplay
  fluent />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
captureClick2() {
  const width = this.player2.videoWidth
  const height = this.player2.videoHeight

  const canvas = window.canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height

  const 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
}

效果如下：

代码总览

涉及的文件如下（具体参考代码）：

1
2
3
4
5
6
|-- src
    |-- views
        |-- videoCaptureTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

代码

按代码总览的目录去代码里找着看就行了。

总结

以上，只是简单的展示了文字水印，想实现复杂的，参考canvas方法就行了，文字旋转、图片等都是可以的。