一图看懂：视频播放如何实现水印截图？

前端

2024-02-17 08:16:12

视频播放和直播加水印截图：一个全面的指南

引言

在视频播放和直播场景中，对视频截图并添加水印是一个常见需求。水印不仅可以保护版权，还可以提高品牌知名度。本文将深入探讨如何在 Vue 中实现视频播放和直播加水印截图功能，提供详细的步骤和代码示例。

需求分析

实现视频播放和直播的截图功能
支持在截图上添加自定义水印

解决方案设计

我们的解决方案采用基于 HTML5 Canvas 的截图方法，并利用 Vue.js 的响应式特性。总体流程如下：

在 Vue 组件中使用<video>标签播放视频或直播流。
创建一个隐藏的<canvas>元素来进行截图。
使用<canvas>元素的drawImage()方法将视频或直播流的内容渲染到画布上。
使用<canvas>元素的toDataURL()方法将画布上的内容转换为 DataURL 格式。
使用<img>标签显示 DataURL 格式的图像。
通过 CSS 背景图片将自定义水印添加到<img>标签中。

代码示例

以下代码示例演示了如何使用 Vue.js 实现视频播放和直播加水印截图：

<template>
  <div>
    <video id="video" controls>
      <source src="path/to/video.mp4" />
    </video>
    <canvas id="canvas" hidden></canvas>
    <img id="image" hidden></img>
  </div>
</template>

<script>
export default {
  mounted() {
    this.video = document.getElementById("video");
    this.canvas = document.getElementById("canvas");
    this.image = document.getElementById("image");

    // 创建水印
    this.watermark = document.createElement("canvas");
    this.watermark.width = 200;
    this.watermark.height = 100;
    const watermarkContext = this.watermark.getContext("2d");
    watermarkContext.font = "bold 20px sans-serif";
    watermarkContext.fillStyle = "white";
    watermarkContext.fillText("Watermark", 50, 50);

    // 监听视频播放事件
    this.video.addEventListener("play", () => {
      this.timer = setInterval(() => {
        // 截图
        this.canvas.width = this.video.videoWidth;
        this.canvas.height = this.video.videoHeight;
        const context = this.canvas.getContext("2d");
        context.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);

        // 转换为 DataURL 格式
        const dataURL = this.canvas.toDataURL();

        // 显示图像并添加水印
        this.image.src = dataURL;
        const imageContext = this.image.getContext("2d");
        imageContext.drawImage(this.watermark, 0, 0);
      }, 1000);
    });

    // 监听视频暂停事件
    this.video.addEventListener("pause", () => {
      clearInterval(this.timer);
    });
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>