<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>随机视频</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: rgb(235, 242, 237);
margin: 0;
font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
box-sizing: border-box;
}
.card {
width: 100%;
max-width: 100vw;
margin: 0 auto;
background: rgb(235, 242, 237);
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(80, 80, 120, 0.10);
padding: 8px 0;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.video-wrapper {
width: 100%;
max-width: 100vw;
aspect-ratio: 9/16;
border-radius: 1rem;
overflow: hidden;
background: rgb(235, 242, 237);
box-shadow: 0 2px 12px rgba(80, 80, 120, 0.12);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
background: rgba(245, 245, 255, 0.7);
display: block;
}
#refreshBtn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: rgba(60, 60, 60, 0.7);
border: none;
outline: none;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(60, 60, 60, 0.88);
border-radius: 50%;
padding: 0;
width: 36px;
height: 36px;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
z-index: 2;
user-select: none;
}
#refreshBtn:active {
transform: translateY(-50%) rotate(-30deg) scale(0.95);
box-shadow: 0 1px 4px rgba(80, 80, 120, 0.18);
background: rgba(60, 60, 60, 0.85);
cursor: grabbing;
}
@media (max-width: 500px) {
.card {
width: 100vw;
max-width: 100vw;
padding: 4px 0;
border-radius: 0.8rem;
}
.video-wrapper {
width: 100vw;
max-width: 100vw;
border-radius: 0.8rem;
}
}
</style>
</head>
<body>
<div class="card">
<div class="video-wrapper">
<video id="randomVideo" src="https://api.yujn.cn/api/zzxjj.php" controls></video>
<button id="refreshBtn" title="刷新视频">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
<path
d="M12 4C9.25144 4 6.82508 5.38626 5.38443 7.5H8V9.5H2V3.5H4V5.99936C5.82381 3.57166 8.72764 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4ZM4 12C4 16.4183 7.58172 20 12 20C14.7486 20 17.1749 18.6137 18.6156 16.5H16V14.5H22V20.5H20V18.0006C18.1762 20.4283 15.2724 22 12 22C6.47715 22 2 17.5228 2 12H4Z">
</path>
</svg>
</button>
</div>
</div>
<script>
// 刷新视频功能
document.getElementById('refreshBtn').onclick = function (e) {
// 如果正在拖动则不触发刷新
if (window._draggingBtn) return;
var video = document.getElementById('randomVideo');
video.src = 'https://api.yujn.cn/api/zzxjj.php?t=' + Date.now();
video.load();
video.play();
};
// 拖动按钮功能
(function () {
var btn = document.getElementById('refreshBtn');
var wrapper = btn.parentElement;
var dragging = false, offsetX = 0, offsetY = 0;
var startX, startY, btnX, btnY;
// 初始位置
btn.style.right = '10px';
btn.style.top = '50%';
btn.style.left = '';
btn.style.bottom = '';
btn.addEventListener('mousedown', function (e) {
dragging = true;
window._draggingBtn = true;
btn.style.cursor = 'grabbing';
var rect = wrapper.getBoundingClientRect();
var btnRect = btn.getBoundingClientRect();
startX = e.clientX;
startY = e.clientY;
btnX = btnRect.left - rect.left;
btnY = btnRect.top - rect.top;
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', function (e) {
if (!dragging) return;
var wrapperRect = wrapper.getBoundingClientRect();
var x = btnX + (e.clientX - startX);
var y = btnY + (e.clientY - startY);
// 限制在容器内
x = Math.max(0, Math.min(wrapperRect.width - btn.offsetWidth, x));
y = Math.max(0, Math.min(wrapperRect.height - btn.offsetHeight, y));
btn.style.left = x + 'px';
btn.style.top = y + 'px';
btn.style.right = '';
btn.style.transform = '';
});
document.addEventListener('mouseup', function (e) {
if (dragging) {
dragging = false;
window._draggingBtn = false;
btn.style.cursor = 'grab';
document.body.style.userSelect = '';
}
});
})();
</script>
</body>
</html>
