demand

Video related projects, sometimes need to take screenshots of the video, the picture is generally added watermark.

Here are the watermarking methods for ordinary video playback and live video playback.

resources

Test the need for video resources with Ali Video center

Play video

Some non-live, uncomplicated video playback needs, directly use this is good, especially some demo projects.

Currently, the

  • MP4: MPEG 4 Files using H264 video codec and AAC audio Codec

  • WebM: WebM files use VP8 video codecs and Vorbis audio codecs

  • Ogg: Ogg files use Theora video codec and Vorbis audio codec

Main implementation code

Concrete visible code

<video id="video1" controls crossOrigin="Anonymous" class="image" width="520" height="320" style="object-fit: fill;" > <source: SRC ="url" type="video/mp4"> Your browser does not support the video tag. </video>Copy the code
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 (180-16 * Math. PI /) CTX. The font = '100 px song typeface CTX. FillStyle =' rgba (255, 255, 255, 1)' ctx.fillText(' testwatermark ', 100, height-200) const image = canvas.toDataURL('image/ PNG ') this.captureImg1 = image}Copy the code

The effect is as follows:

Aliplayer plays videos

Support MP4, FLV, M3U8, MP3 format video, support H.264 coding video. RTMP is supported in Flash mode, but Flash is not updated, so it is ignored. Detailed reference documents

Integration into the project can be done using vue-aliplayer-v2 or directly by referring to the documentation.

Aliplayer function display, here is the code to see, not detailed introduction.

This player itself comes with watermark screenshots function, according to the document configuration is good. Disadvantages are also obvious, can only text, not good customization. You can use this if your requirements are not complicated. If you want to customize the complex watermark, you can refer to the following section easyplayer. js play video correlation to achieve, the principle is the same.

SnapshotWatermark :{left:"100", top:"100", text:" test watermark ", font:"italic bold 48px 宋体", strokeColor:"red", fillColor:'green' }Copy the code

Easyplayer.js plays the video

Easyplayer supports a more comprehensive video format, is currently found the only SUPPORT to play H.265 format video H5 player easyplayer.js, support live

When you use this player on the Internet, most of it is the old version, but here it is the latest version.

Note:

  • 1, the current latest version of this player, height does not automatically fill the parent container, so throughscssForce it on, for example, here320px(For the corresponding selector, see Elements in Chrome’s developer tools)
::v-deep .video-wrapper { padding-bottom: 0px ! important; height: 320px ! important; }Copy the code
  • 2. Screenshots of video playbackvideoBoth require cross-domain configuration. For all third party H5 video players, find the correspondingvideoObject Settings, the principle is the same. For example,Easyplayer.jsThe cross-domain Settings of
this.player2 = this.$refs['video2'].player.el_.children[0]
this.player2.setAttribute('crossOrigin', 'Anonymous')
Copy the code

This setting must be set before the screenshot, otherwise it will not take effect.

Main implementation code

Concrete visible code

<EasyPlayer
  ref="video2"
  class="video-view"
  :video-url="url"
  :stretch="true"
  live
  autoplay
  fluent />
Copy the code
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 (180-16 * Math. PI /) CTX. The font = '100 px song typeface CTX. FillStyle =' rgba (255, 255, 255, 1)' ctx.fillText(' testwatermark ', 100, height-200) const image = canvas.toDataURL('image/ PNG ') this.captureImg2 = image}Copy the code

The effect is as follows:

Code overview

The files involved are as follows (specific reference code) :

| - SRC | - views | | - videoCaptureTest / / instance is - index. The vue | -- index. SCSS | -- index. JsCopy the code

code

Just look for the code in the code Overview directory.

conclusion

Above, just a simple display of text watermarking, to achieve complex, reference canvas method on the line, text rotation, pictures and so on are ok.