zivgit/video-watermark-relative-position.html

## video-watermark-relative-position.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video watermark relative position</title>
    <style>
        .video-container {
            position: relative;
            line-height: 0;
        }
        .video-container video {
            width: 100%;
            height: 400px;
            background-color: black;
            background-image: repeating-linear-gradient(-45deg, transparent 0, rgba(255, 255, 255, 0.0196078431) 0.05rem 0.5rem, transparent 0.55rem 1rem);
        }
        .video-watermark-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .video-watermark-container em {
            display: inline-block;
            margin: 2% 2% 0;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            color: red;
            font-family: sans-serif;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Video watermark relative position</h1>
    <p>Here is a simple HTML example.</p>

    <div class="video-container">
        <video id="myVideo" controls>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
            Your browser does not support the HTML5 video tag.
        </video>
        <div id="watermarkContainer" class="video-watermark-container">
            <!--  -->
        </div>
    </div>

    <script>
        const myVideo = document.getElementById('myVideo');
        const watermarkContainer = document.getElementById('watermarkContainer');
        let watermarkText = '@PunInTheSunshine';

        const resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
                const { contentRect, target } = entry;
                const aspectRatioOfVideo = contentRect.height / contentRect.width;
                const aspectRatioOfScreen = target.videoHeight / target.videoWidth;
                let width = 0, height = 0;

                if (aspectRatioOfVideo > aspectRatioOfScreen) {
                    width = contentRect.width;
                    height = contentRect.width * aspectRatioOfScreen;
                } else {
                    width = contentRect.height * (1 / aspectRatioOfScreen);
                    height = contentRect.height;
                }

                watermarkContainer.style.width = `${width}px`;
                watermarkContainer.style.height = `${height}px`;
                watermarkContainer.style.fontSize = `${width * 0.024}px`;
                watermarkContainer.innerHTML = `<em>${watermarkText}</em>`;
            }
        });

        myVideo.addEventListener('loadeddata', () => {
            resizeObserver.observe(myVideo);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Video watermark relative position</title>
	<style>
	.video-container {
	position: relative;
	line-height: 0;
	}
	.video-container video {
	width: 100%;
	height: 400px;
	background-color: black;
	background-image: repeating-linear-gradient(-45deg, transparent 0, rgba(255, 255, 255, 0.0196078431) 0.05rem 0.5rem, transparent 0.55rem 1rem);
	}
	.video-watermark-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	}
	.video-watermark-container em {
	display: inline-block;
	margin: 2% 2% 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	color: red;
	font-family: sans-serif;
	line-height: 1.5;
	}
	</style>
	</head>
	<body>
	<h1>Video watermark relative position</h1>
	<p>Here is a simple HTML example.</p>

	<div class="video-container">
	<video id="myVideo" controls>
	<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
	<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
	Your browser does not support the HTML5 video tag.
	</video>
	<div id="watermarkContainer" class="video-watermark-container">
	<!-- -->
	</div>
	</div>

	<script>
	const myVideo = document.getElementById('myVideo');
	const watermarkContainer = document.getElementById('watermarkContainer');
	let watermarkText = '@PunInTheSunshine';

	const resizeObserver = new ResizeObserver((entries) => {
	for (const entry of entries) {
	const { contentRect, target } = entry;
	const aspectRatioOfVideo = contentRect.height / contentRect.width;
	const aspectRatioOfScreen = target.videoHeight / target.videoWidth;
	let width = 0, height = 0;

	if (aspectRatioOfVideo > aspectRatioOfScreen) {
	width = contentRect.width;
	height = contentRect.width * aspectRatioOfScreen;
	} else {
	width = contentRect.height * (1 / aspectRatioOfScreen);
	height = contentRect.height;
	}

	watermarkContainer.style.width = `${width}px`;
	watermarkContainer.style.height = `${height}px`;
	watermarkContainer.style.fontSize = `${width * 0.024}px`;
	watermarkContainer.innerHTML = `<em>${watermarkText}</em>`;
	}
	});

	myVideo.addEventListener('loadeddata', () => {
	resizeObserver.observe(myVideo);
	});
	</script>
	</body>
	</html>