前言：
很多时候，视频的转码工作在后端，我们前端是拿到可以播放的链接进行播放即可。但是总是会出现一些定制化的需求，比如在视频的某个区域贴上水印、标识或者文字。这个时候大部分是由前端来操作的。
直接去修改播放器里的东西，不仅难度系数较高，而且危险。毕竟动那种高度集成的东西，一不小心就会破坏原有的样式或者布局。那么让笔者来给大家提供一套简易的手段吧，简单而又实用。
方案：
前端的大伙多多少少都有听说过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>
<canvas
width="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 可以用来创建互动艺术作品，如互动装置、互动展览等。它支持动态更新和交互，可以实现独特的互动体验。
总之，Canvas 是一种非常灵活和强大的绘图工具，适用于各种需要图形和动画的场景。
本文转载自: https://blog.csdn.net/yxlyttyxlytt/article/details/143213827
版权归原作者 零凌林 所有， 如有侵权，请联系我们删除。
版权归原作者 零凌林 所有， 如有侵权，请联系我们删除。