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

最新推荐文章于 2024-07-20 18:16:53 发布

落华X

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量244

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/LuoHuaX/article/details/140555023

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、效果如下

在这里插入图片描述

二、代码

<!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>