当前位置：首页 > news >正文

前端方案：播放的视频加水印或者文字最佳实践

news 2024/10/25 6:51:32

前言：

很多时候，视频的转码工作在后端，我们前端是拿到可以播放的链接进行播放即可。但是总是会出现一些定制化的需求，比如在视频的某个区域贴上水印、标识或者文字。这个时候大部分是由前端来操作的。

直接去修改播放器里的东西，不仅难度系数较高，而且危险。毕竟动那种高度集成的东西，一不小心就会破坏原有的样式或者布局。那么让笔者来给大家提供一套简易的手段吧，简单而又实用。

方案：

前端的大伙多多少少都有听说过canvas这个东西吧？是的，笔者的方案就是借助canvas来操作。

思路是这样的，我们用canvas来设置视频播放的区域，然后将视频绘制进canvas里，再将我们想放置进视频里的水印和文字，绘制进canvas的指定区域。其实，本质上，类似于图层的叠加，如下图所示：

实践源码：

在这里，笔者为了方便，就直接使用html来演示了。

下面将以csdn的logo和一段华山的视频进行合成

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvaswidth="600"height="400"id="c1_box"style="border: 1px solid #000"></canvas><button id="btn">播放</button></body>
</html><script>/** @type {HTMLCanvasElement} */var c1 = document.getElementById("c1_box");var ctx = c1.getContext("2d");var video = document.createElement("video");video.src = "./assets/huashan.mp4";var btn = document.querySelector("#btn");btn.addEventListener("click", () => {if (video.paused) {video.play();render();} else {video.pause();}});let image = new Image();image.src = "./assets/logo.png";function render() {ctx.clearRect(0, 0, 600, 400);ctx.drawImage(video, 0, 0, 600, 400);ctx.drawImage(image, 400, 350, 200, 50);requestAnimationFrame(render);}
</script>

原视频：

加了水印的视频：

源码拆解：

1.获取canvas的盒子

  var c1 = document.getElementById("c1_box");var ctx = c1.getContext("2d");

2.内存中创建video标签，并且注入播放源地址

  var video = document.createElement("video");video.src = "./assets/huashan.mp4";

3.赋予播放按钮播放和暂停播放的功能

  var btn = document.querySelector("#btn");btn.addEventListener("click", () => {if (video.paused) {video.play();render();} else {video.pause();}});

4.内存中创建Image对象，并且赋予其水印地址

  let image = new Image();image.src = "./assets/logo.png";

5.渲染函数，将视频资源和水印资源渲染进canvas里

  function render() {ctx.clearRect(0, 0, 600, 400);ctx.drawImage(video, 0, 0, 600, 400);ctx.drawImage(image, 400, 350, 200, 50);requestAnimationFrame(render);}

到这里，我们对于视频和水印或者文字的结合就演示结束了，那么你学会了吗？

拓展：

canvas的优点

Canvas 是一种用于在网页上绘制图形的 HTML5 元素，它具有以下优点：

高性能：Canvas 提供了高性能的绘图能力，适合处理大量图形和动画。它直接在网页上绘制，不需要额外的插件或库。

灵活性：Canvas 提供了丰富的绘图功能，包括绘制形状、图像、文本和路径等。你可以通过编程方式控制绘制的细节，实现复杂的图形效果。

动态更新：Canvas 可以通过 JavaScript 动态更新内容，非常适合实现动画和交互效果。你可以使用 requestAnimationFrame 方法来创建平滑的动画。

跨浏览器支持：Canvas 在大多数现代浏览器中都有良好的支持，包括移动设备。这使得它成为跨平台开发的一个好选择。

轻量级：Canvas 是一个轻量级的绘图工具，不需要加载额外的库或插件，可以快速集成到项目中。

易于学习：Canvas 的 API 相对简单，即使没有图形编程经验的人也能快速上手。它提供了一些基本的绘图函数，如 fillRect、strokeRect、drawImage 等。

丰富的交互性：通过 Canvas，你可以实现复杂的交互效果，如拖放、点击检测等。你可以通过监听鼠标和触摸事件来响应用户的操作。

支持离屏渲染：Canvas 支持离屏渲染，可以在后台绘制图形，然后再一次性显示到屏幕上，提高性能。

支持滤镜和效果：Canvas 提供了一些高级的绘图效果，如滤镜、阴影、渐变等，可以用来创建更加丰富和生动的图形。

支持矢量图形：虽然 Canvas 本身不支持矢量图形，但可以通过一些技巧（如使用路径和变换）来实现类似的效果。

canvas的适用场景

Canvas 是一种强大的绘图工具，适用于多种场景，包括但不限于以下几种：

游戏开发：Canvas 可以用来创建复杂的2D游戏，包括角色、背景、动画和交互元素。它提供了高性能的绘图能力，可以处理大量的图形和动画。

数据可视化：Canvas 可以用来创建各种数据可视化图表，如折线图、柱状图、饼图等。它支持丰富的绘图功能，可以轻松实现复杂的图形效果。

图形编辑器：Canvas 可以用来创建图形编辑器，如绘图板、图像编辑器等。它提供了丰富的绘图功能，可以处理各种图形和图像。

动画和特效：Canvas 可以用来创建各种动画和特效，如粒子系统、火焰、烟雾等。它支持动态更新和交互，可以实现复杂的动画效果。

实时绘图：Canvas 可以用来创建实时绘图应用，如白板、绘图工具等。它支持动态更新和交互，可以实现实时的绘图效果。

网页游戏：Canvas 可以用来创建网页游戏，如射击游戏、跑酷游戏等。它支持高性能的绘图和交互，可以实现流畅的游戏体验。

广告和营销：Canvas 可以用来创建动态广告和营销图形，如滚动字幕、动画广告等。它支持丰富的绘图和动画效果，可以实现吸引人的视觉效果。

教育应用：Canvas 可以用来创建教育应用，如数学绘图、物理模拟等。它支持丰富的绘图功能，可以用来展示和解释复杂的科学概念。

艺术创作：Canvas 可以用来创建各种艺术作品，如绘画、雕塑等。它支持丰富的绘图和动画效果，可以实现独特的艺术表达。

互动艺术：Canvas 可以用来创建互动艺术作品，如互动装置、互动展览等。它支持动态更新和交互，可以实现独特的互动体验。