一、效果如下
二、代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><style>.container {position: relative;}.base {width: 300px;height: 200px; background-color: gray;}.canvas {position: absolute;width: 300px;height: 200px; top: 0;left: 0;z-index: 999;}</style><div class="container"><video class="base" src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" autoplay muted></video><canvas id="canvas" class="canvas"></canvas></div><script>function canvas() {var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.font = '30px Arial';ctx.fillStyle = '#000000';ctx.fillText('Hello World', 70, 70);}canvas()</script>
</body>
</html>
三、视频添加水印
现在实现的只是观看视频时有水印，实际视频没有任何变化，想要实现视频添加水印，还需要用ffmpeg，感兴趣的可以去了解下
