单页
<!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: #d2e7d3;
margin: 0;
font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
box-sizing: border-box;
overflow: hidden;
}
.card {
width: 100vw;
height: 100vh;
margin: 0 auto;
background: #d2e7d3;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(80, 80, 120, 0.10);
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.video-wrapper {
/* 新增视频淡入淡出动画 */
width: 100%;
max-width: 100vw;
aspect-ratio: 9/16;
height: 100vh;
max-height: 100vh;
border-radius: 1.2rem;
border: 4px solid #4caf50;
overflow: hidden;
background: #eafbe6;
box-shadow: 0 4px 24px rgba(76, 175, 80, 0.10);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
transition: box-shadow 0.3s, border-color 0.3s;
padding: 16px;
box-sizing: border-box;
}
.fade-video {
opacity: 1;
transition: opacity 0.5s;
}
.fade-video.hide {
opacity: 0;
pointer-events: none;
}
.video-wrapper:hover {
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.18);
border-color: #388e3c;
}
video {
width: 100%;
height: auto;
max-height: 100%;
object-fit: cover;
border-radius: 1rem;
background: #fff;
display: block;
margin: 0 auto;
box-shadow: 0 2px 16px rgba(76, 175, 80, 0.08);
transition: box-shadow 0.3s, opacity 0.5s;
opacity: 1;
}
.fade-video.hide {
opacity: 0;
pointer-events: none;
}
#refreshBtn {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #4caf50 60%, #81c784 100%);
border: none;
outline: none;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.18);
border-radius: 50%;
padding: 0;
width: 44px;
height: 44px;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
z-index: 2;
user-select: none;
}
#refreshBtn:hover {
background: linear-gradient(135deg, #43a047 60%, #a5d6a7 100%);
box-shadow: 0 8px 24px rgba(76, 175, 80, 0.28);
transform: translateY(-50%) scale(1.08);
}
#refreshBtn:active {
transform: translateY(-50%) rotate(-30deg) scale(0.95);
box-shadow: 0 1px 4px rgba(80, 80, 120, 0.18);
background: #388e3c;
cursor: grabbing;
}
@media (max-width: 500px) {
.card {
width: 100vw;
max-width: 100vw;
height: 100vh;
padding: 0;
border-radius: 0.8rem;
}
.video-wrapper {
width: 100vw;
max-width: 100vw;
height: 90vh;
max-height: 90vh;
border-radius: 0.8rem;
}
#refreshBtn {
right: 8px;
width: 38px;
height: 38px;
}
#videoLoading {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
z-index: 3;
align-items: center;
justify-content: center;
}
.loading-spinner {
width: 48px;
height: 48px;
border: 4px solid #b2dfdb;
border-top: 4px solid #4caf50;
border-radius: 50%;
animation: spin 1s linear infinite;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.12);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="card">
<div class="video-wrapper">
<div id="videoLoading"
style="display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.5);z-index:3;align-items:center;justify-content:center;">
<div class="loading-spinner"
style="width:48px;height:48px;border:4px solid #b2dfdb;border-top:4px solid #4caf50;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 2px 8px rgba(76,175,80,0.12);">
</div>
</div>
<video id="randomVideo" class="fade-video" src="https://api.yujn.cn/api/zzxjj.php" controls></video>
<!-- 只保留一个 video，去除预加载 video -->
<button id="refreshBtn" title="刷新视频" aria-label="刷新视频">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="28" height="28">
<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>
// 刷新视频功能（平滑体验）
var refreshBtn = document.getElementById('refreshBtn');
var video = document.getElementById('randomVideo');
var loading = document.getElementById('videoLoading');
refreshBtn.onclick = function (e) {
if (window._draggingBtn) return;
// 淡出视频，显示 loading
video.classList.add('hide');
loading.style.display = 'flex';
// 切换 src
video.src = 'https://api.yujn.cn/api/zzxjj.php?t=' + Date.now();
video.load();
// 监听加载完成后淡入视频并自动播放
video.oncanplay = function () {
loading.style.display = 'none';
setTimeout(function () {
video.classList.remove('hide');
video.play();
}, 100);
};
};
// 监听 video 全屏事件，保证全屏时视频完整显示
(function () {
var video = document.getElementById('randomVideo');
var loading = document.getElementById('videoLoading');
video.addEventListener('waiting', function () {
loading.style.display = 'flex';
});
video.addEventListener('playing', function () {
loading.style.display = 'none';
});
video.addEventListener('canplay', function () {
loading.style.display = 'none';
});
function onFullscreenChange() {
var isFull = document.fullscreenElement === video || video.webkitDisplayingFullscreen;
if (isFull) {
video.style.objectFit = 'contain';
video.style.background = '#222';
loading.style.display = 'none';
} else {
video.style.objectFit = 'cover';
video.style.background = '#fff';
}
}
document.addEventListener('fullscreenchange', onFullscreenChange);
video.addEventListener('webkitfullscreenchange', onFullscreenChange);
})();
// 拖动按钮功能
(() => {
const btn = document.getElementById('refreshBtn');
const wrapper = btn.parentElement;
let dragging = false, dragReady = false, dragTimer = null;
let startX, startY, btnX, btnY;
// 初始位置
btn.style.right = '10px';
btn.style.top = '50%';
btn.style.left = '';
btn.style.bottom = '';
// 长按500ms后才能拖动
btn.addEventListener('mousedown', function (e) {
dragReady = false;
dragTimer = setTimeout(() => {
dragReady = true;
dragging = true;
window._draggingBtn = true;
btn.style.cursor = 'grabbing';
const rect = wrapper.getBoundingClientRect();
const btnRect = btn.getBoundingClientRect();
startX = e.clientX;
startY = e.clientY;
btnX = btnRect.left - rect.left;
btnY = btnRect.top - rect.top;
document.body.style.userSelect = 'none';
}, 500);
});
btn.addEventListener('mouseup', function () {
clearTimeout(dragTimer);
if (!dragging) dragReady = false;
});
document.addEventListener('mousemove', function (e) {
if (!dragging) return;
const wrapperRect = wrapper.getBoundingClientRect();
let x = btnX + (e.clientX - startX);
let 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 () {
if (dragging) {
dragging = false;
dragReady = false;
window._draggingBtn = false;
btn.style.cursor = 'grab';
document.body.style.userSelect = '';
}
clearTimeout(dragTimer);
});
// 防止拖动时触发点击刷新
btn.addEventListener('click', function (e) {
if (dragging || dragReady) {
e.stopPropagation();
e.preventDefault();
}
}, true);
})();
</script>
</body>
</html>