一、效果如下
二、代码
javascript
<!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，感兴趣的可以去了解下