前端实现视频播放添加水印

落华X2024-07-20 10:43

一、效果如下

二、代码

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，感兴趣的可以去了解下