<template>
<div ref="videoContainer" style="position: relative; width: 100%; height: 100%">
<!-- 视频标签 -->
<video
ref="video"
class="video"
controls
autoplay
loop
style="width: 100%; height: 100%"
:src="videoUrl"
@click="togglePlay"
controlsList="nodownload"
></video>
<!-- 对角线游动的水印 -->
<div class="watermark">
视频水印
</div>
<!-- 自定义全屏按钮 -->
<button @click="toggleFullscreen" class="fullscreen-btn">
{{ isFullscreen ? "退出全屏" : "全屏" }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: "https://www.example.com/video.mp4", // 替换为你的视频 URL
isFullscreen: false, // 控制全屏状态
};
},
methods: {
togglePlay() {
const video = this.$refs.video;
if (video.paused) {
video.play();
} else {
video.pause();
}
},
toggleFullscreen() {
const videoContainer = this.$refs.videoContainer;
if (!this.isFullscreen) {
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else if (videoContainer.webkitRequestFullscreen) {
videoContainer.webkitRequestFullscreen();
} else if (videoContainer.msRequestFullscreen) {
videoContainer.msRequestFullscreen();
}
this.isFullscreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.isFullscreen = false;
}
},
},
mounted() {
document.addEventListener("fullscreenchange", this.onFullscreenChange);
},
beforeDestroy() {
document.removeEventListener("fullscreenchange", this.onFullscreenChange);
},
methods: {
toggleFullscreen() {
if (!this.isFullscreen) {
if (this.$refs.videoContainer.requestFullscreen) {
this.$refs.videoContainer.requestFullscreen();
} else if (this.$refs.videoContainer.webkitRequestFullscreen) {
this.$refs.videoContainer.webkitRequestFullscreen();
} else if (this.$refs.videoContainer.msRequestFullscreen) {
this.$refs.videoContainer.msRequestFullscreen();
}
this.isFullscreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.isFullscreen = false;
}
},
onFullscreenChange() {
this.isFullscreen = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
},
},
};
</script>
<style scoped>
.video {
width: 100%;
height: 100%;
}
.watermark {
color: rgba(255, 255, 255, 0.5);
font-size: 24px;
font-weight: bold;
pointer-events: none; /* 确保水印不会阻止点击事件 */
position: absolute;
z-index: 10;
animation: diagonalMove 5s linear infinite alternate;
}
.fullscreen-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
border-radius: 4px;
z-index: 10;
}
/* 水印对角线游动动画 */
@keyframes diagonalMove {
0% {
top: 10px;
left: 10px;
}
100% {
top: calc(100% - 40px); /* 调整以防止水印超出边界 */
left: calc(100% - 120px);
}
}
</style>
前端给视频加水印
最新推荐文章于 2025-02-08 14:49:20 发布