<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频背景卡密验证系统</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
color: white;
transition: all 0.5s ease;
}
#video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: all 0.5s ease;
filter: brightness(1.2); /* 增加视频亮度 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); /* 减少遮罩层不透明度 */
z-index: 0;
}
.container {
position: relative;
z-index: 1;
width: 90%;
max-width: 500px;
padding: 30px;
background: rgba(0, 0, 0, 0.2); /* 进一步减少容器不透明度 */
border-radius: 15px;
text-align: center;
transition: all 0.5s ease;
backdrop-filter: blur(2px); /* 轻微模糊效果 */
}
h1 {
font-size: 28px;
margin-bottom: 20px;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
.notice {
background: rgba(0, 0, 0, 0.2); /* 减少背景不透明度 */
padding: 15px;
border-radius: 8px;
margin-bottom: 25px;
font-size: 14px;
line-height: 1.5;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
input {
width: 100%;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.7); /* 增加边框不透明度 */
border-radius: 8px;
background: rgba(0, 0, 0, 0.3); /* 增加输入框背景不透明度 */
color: white;
font-size: 16px;
transition: all 0.3s;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
input:focus {
outline: none;
border-color: #ffffff;
background: rgba(0, 0, 0, 0.4);
}
.buttons {
display: flex;
gap: 15px;
margin-top: 25px;
}
button {
flex: 1;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.7); /* 增加边框不透明度 */
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
background: rgba(0, 0, 0, 0.3); /* 增加按钮背景不透明度 */
color: white;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
#verify-btn:hover {
background: rgba(76, 175, 80, 0.4);
transform: translateY(-2px);
}
#Pay {
background: rgba(0, 0, 0, 0.3);
color: white;
margin-top: 15px;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
}
#Pay:hover {
background: rgba(255, 152, 0, 0.4);
transform: translateY(-2px);
}
.video-controls {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
display: flex;
gap: 10px;
}
.video-btn {
padding: 8px 15px;
background: rgba(0, 0, 0, 0.3);
color: white;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
.video-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.video-btn.active {
background: rgba(76, 175, 80, 0.4);
}
.orientation-info {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
background: rgba(0, 0, 0, 0.3);
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
color: white;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
border: 1px solid rgba(255, 255, 255, 0.7);
}
#mute-toggle {
padding: 8px 15px;
background: rgba(0, 0, 0, 0.3);
color: white;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
font-size: 16px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* 增强文字阴影 */
}
#mute-toggle:hover {
background: rgba(255, 255, 255, 0.3);
}
#rotate-reminder {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 3;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
text-align: center;
flex-direction: column;
}
/* 横屏样式 */
.landscape .container {
max-width: 600px;
padding: 40px;
}
.landscape h1 {
font-size: 32px;
}
.landscape .buttons {
flex-direction: row;
}
/* 竖屏样式 */
.portrait .container {
max-width: 400px;
padding: 25px;
}
.portrait .buttons {
flex-direction: column;
}
/* 响应式调整 */
@media (max-width: 768px) {
.container {
width: 95%;
padding: 20px;
}
h1 {
font-size: 24px;
}
.video-controls {
bottom: 10px;
right: 10px;
}
}
</style>
</head>
<body class="portrait">
<video id="video-background" autoplay muted loop playsinline>
<!-- 视频将在JS中动态加载 -->
</video>
<div class="overlay"></div>
<div class="orientation-info" id="orientation-info">竖屏模式</div>
<div class="container">
<h1 id="title">卡密验证系统</h1>
<div class="notice" id="notice">
请输入您的卡密进行验证
</div>
<div class="input-group">
<label for="card-input">卡密</label>
<input type="text" id="card-input" placeholder="请输入您的卡密">
</div>
<div class="buttons">
<button id="verify-btn">验证</button>
</div>
<button id="Pay">购买卡密</button>
</div>
<div class="video-controls">
<button class="video-btn active" id="video1-btn">竖屏视频</button>
<button class="video-btn" id="video2-btn">横屏视频</button>
<button id="mute-toggle">开启声音</button>
</div>
<div id="rotate-reminder">
请将您的设备旋转到<span id="target-orientation"></span>模式<br>以获得更好的观看体验。<br>剩余<span id="countdown">3</span>秒后自动切换视频。
</div>
<script>
// 视频列表
const videos = [
"https://mpimg.cn/down.php/3db04ea1ec6b40a86cd6a4570e844e29.mp4", // 竖屏视频
"https://mpimg.cn/down.php/a92d10a2467443086c56ccd7adc1cba3.mp4" // 横屏视频
];
// 全局变量
let currentVideoIndex = 0;
const videoElement = document.getElementById('video-background');
const orientationInfo = document.getElementById('orientation-info');
const muteToggle = document.getElementById('mute-toggle');
const rotateReminder = document.getElementById('rotate-reminder');
const targetOrientationSpan = document.getElementById('target-orientation');
const countdownSpan = document.getElementById('countdown');
let reminderTimeout;
let countdownInterval;
// 初始化函数
function init() {
// 初始化页面内容
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
document.getElementById("Pay").style.display = PanGolin.Is_Pay() == true ? "block" : "none";
// 绑定按钮事件
document.getElementById("verify-btn").addEventListener("click", function() {
const cardInput = document.getElementById('card-input').value;
if (!cardInput) {
alert("请输入卡密");
return;
}
PanGolin.Verify(cardInput);
});
document.getElementById("Pay").addEventListener("click", function() {
PanGolin.Pay();
});
// 静音切换
muteToggle.addEventListener('click', toggleMute);
// 视频切换按钮事件
document.getElementById('video1-btn').addEventListener('click', () => loadVideo(0));
document.getElementById('video2-btn').addEventListener('click', () => loadVideo(1));
// 初始加载：根据设备方向选择视频
const isDeviceLandscape = window.matchMedia("(orientation: landscape)").matches;
const initialVideoIndex = isDeviceLandscape ? 1 : 0;
// 预加载视频并确保自动播放
preloadAndPlayVideo(initialVideoIndex);
}
// 预加载视频并确保自动播放
function preloadAndPlayVideo(index) {
currentVideoIndex = index;
// 创建新的视频元素进行预加载
const tempVideo = document.createElement('video');
tempVideo.src = videos[index];
tempVideo.preload = 'auto';
tempVideo.addEventListener('loadeddata', function() {
// 预加载完成后，设置主视频元素并播放
videoElement.src = videos[index];
// 更新按钮状态
document.querySelectorAll('.video-btn').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
// 确保视频播放
ensureVideoPlayback();
// 视频加载后检测方向
videoElement.onloadedmetadata = function() {
detectVideoOrientation();
};
});
tempVideo.load();
}
// 加载视频
function loadVideo(index) {
if (currentVideoIndex === index) return;
currentVideoIndex = index;
videoElement.src = videos[index];
// 更新按钮状态
document.querySelectorAll('.video-btn').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
// 确保视频播放
ensureVideoPlayback();
// 视频加载后检测方向
videoElement.onloadedmetadata = function() {
detectVideoOrientation();
};
// 视频错误处理
videoElement.onerror = function() {
console.error('视频加载失败，切换到下一个视频');
currentVideoIndex = (currentVideoIndex + 1) % videos.length;
loadVideo(currentVideoIndex);
};
}
// 确保视频播放
function ensureVideoPlayback() {
// 立即尝试播放
videoElement.play().catch(e => {
console.log('自动播放被阻止，等待用户交互');
// 如果自动播放被阻止，添加用户交互事件监听
const playOnInteraction = function() {
videoElement.play().then(() => {
console.log('用户交互后视频开始播放');
}).catch(err => {
console.log('用户交互后播放仍然失败:', err);
});
document.body.removeEventListener('click', playOnInteraction);
};
document.body.addEventListener('click', playOnInteraction);
});
// 添加canplay事件监听，确保视频在可以播放时开始播放
videoElement.addEventListener('canplay', function() {
videoElement.play().catch(e => {
console.log('canplay事件触发但播放失败:', e);
});
});
// 添加loadeddata事件监听，确保视频在数据加载后开始播放
videoElement.addEventListener('loadeddata', function() {
videoElement.play().catch(e => {
console.log('loadeddata事件触发但播放失败:', e);
});
});
}
// 检测视频方向并设置相应样式
function detectVideoOrientation() {
const isLandscape = videoElement.videoWidth > videoElement.videoHeight;
if (isLandscape) {
document.body.classList.remove('portrait');
document.body.classList.add('landscape');
orientationInfo.textContent = "横屏模式";
} else {
document.body.classList.remove('landscape');
document.body.classList.add('portrait');
orientationInfo.textContent = "竖屏模式";
}
// 检查是否与设备方向匹配
checkOrientationMatch();
}
// 检查视频方向与设备方向是否匹配
function checkOrientationMatch() {
const isDeviceLandscape = window.matchMedia("(orientation: landscape)").matches;
const isVideoLandscape = videoElement.videoWidth > videoElement.videoHeight;
// 如果方向不匹配，显示提醒
if (isDeviceLandscape !== isVideoLandscape) {
const target = isVideoLandscape ? '横屏' : '竖屏';
targetOrientationSpan.textContent = target;
rotateReminder.style.display = 'flex';
// 开始倒计时
let remaining = 3;
countdownSpan.textContent = remaining;
if (countdownInterval) clearInterval(countdownInterval);
countdownInterval = setInterval(() => {
remaining--;
countdownSpan.textContent = remaining;
if (remaining <= 0) {
clearInterval(countdownInterval);
}
}, 1000);
// 设置超时
if (reminderTimeout) clearTimeout(reminderTimeout);
reminderTimeout = setTimeout(() => {
const currentDeviceLandscape = window.matchMedia("(orientation: landscape)").matches;
const currentDeviceOrientation = currentDeviceLandscape ? 'landscape' : 'portrait';
const videoOrientation = videoElement.videoWidth > videoElement.videoHeight ? 'landscape' : 'portrait';
if (videoOrientation !== currentDeviceOrientation) {
// 用户未旋转，切换到匹配的视频
const matchingIndex = currentDeviceLandscape ? 1 : 0;
loadVideo(matchingIndex);
}
rotateReminder.style.display = 'none';
if (countdownInterval) clearInterval(countdownInterval);
}, 3000);
} else {
// 匹配，隐藏提醒
rotateReminder.style.display = 'none';
if (reminderTimeout) clearTimeout(reminderTimeout);
if (countdownInterval) clearInterval(countdownInterval);
}
}
// 切换静音
function toggleMute() {
videoElement.muted = !videoElement.muted;
muteToggle.textContent = videoElement.muted ? '开启声音' : '关闭声音';
}
// 监听设备方向变化
window.addEventListener('orientationchange', function() {
setTimeout(checkOrientationMatch, 300);
});
// 初始化应用
window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->