|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
|
|
<title>Girls</title> |
|
|
<style> |
|
|
html, body { height: 100%; margin: 0; padding: 0; background: #111; color: #fff; } |
|
|
body { |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #181c24 0%, #232526 60%, #23243a 100%); |
|
|
} |
|
|
#player-box { |
|
|
background: none; |
|
|
padding: 0; |
|
|
border-radius: 0; |
|
|
box-shadow: none; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
width: 100vw; |
|
|
max-width: 100vw; |
|
|
} |
|
|
.video-wrap { |
|
|
position: relative; |
|
|
width: 100vw; |
|
|
max-width: 420px; |
|
|
aspect-ratio: 9/16; |
|
|
background: |
|
|
radial-gradient(ellipse at 60% 20%, rgba(60,70,110,0.18) 0%, rgba(30,30,40,0.12) 60%, rgba(20,20,20,0.92) 100%), |
|
|
linear-gradient(135deg, rgba(40,44,60,0.85) 0%, rgba(30,30,40,0.92) 100%); |
|
|
border-radius: 28px; |
|
|
box-shadow: |
|
|
0 8px 32px 0 rgba(31, 38, 135, 0.18), |
|
|
0 2px 8px 0 rgba(0,0,0,0.18), |
|
|
0 0 0 4px rgba(80,120,255,0.08) inset, |
|
|
0 1.5px 8px 0 rgba(0,0,0,0.10); |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
backdrop-filter: blur(3.5px) saturate(1.15); |
|
|
} |
|
|
.video-wrap::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
border-radius: 28px; |
|
|
pointer-events: none; |
|
|
box-shadow: |
|
|
0 0 32px 8px rgba(255,255,255,0.08) inset, |
|
|
0 0 0 2px rgba(255,255,255,0.10) inset; |
|
|
} |
|
|
.video-fade { |
|
|
opacity: 0; |
|
|
transition: opacity 0.4s; |
|
|
} |
|
|
.video-fade-in { |
|
|
opacity: 1 !important; |
|
|
transition: opacity 0.4s; |
|
|
} |
|
|
.loading-spinner { |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
border: 4px solid rgba(255,255,255,0.18); |
|
|
border-top: 4px solid #fff; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
z-index: 20; |
|
|
background: none; |
|
|
pointer-events: none; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: translate(-50%, -50%) rotate(0deg); } |
|
|
100% { transform: translate(-50%, -50%) rotate(360deg); } |
|
|
} |
|
|
.load-fail-tip { |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 60%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: rgba(30,30,40,0.92); |
|
|
color: #fff; |
|
|
padding: 12px 24px; |
|
|
border-radius: 14px; |
|
|
font-size: 15px; |
|
|
z-index: 21; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.12); |
|
|
display: none; |
|
|
} |
|
|
video { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 20px; |
|
|
background: #111; |
|
|
display: block; |
|
|
object-fit: cover; |
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10); |
|
|
transition: box-shadow 0.2s; |
|
|
} |
|
|
.controls { |
|
|
position: absolute; |
|
|
bottom: 60px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
padding: 0; |
|
|
background: none; |
|
|
box-sizing: border-box; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.3s, transform 0.3s; |
|
|
z-index: 10; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
.info { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 14px; |
|
|
color: #fff; |
|
|
font-size: 13px; |
|
|
background: rgba(0,0,0,0.05); |
|
|
padding: 2px 10px; |
|
|
border-radius: 12px; |
|
|
z-index: 2; |
|
|
pointer-events: none; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s, transform 0.3s; |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
.video-wrap:hover .controls { |
|
|
opacity: 1; |
|
|
pointer-events: auto; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.video-wrap:hover .info { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
@media (max-width: 600px) { |
|
|
html, body { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
min-height: 100vh; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
border-radius: 0 !important; |
|
|
} |
|
|
.video-wrap { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
max-width: 100vw; |
|
|
max-height: 100vh; |
|
|
border-radius: 0 !important; |
|
|
box-shadow: none; |
|
|
aspect-ratio: unset; |
|
|
} |
|
|
.video-wrap::before { |
|
|
box-shadow: none !important; |
|
|
} |
|
|
video { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
border-radius: 0 !important; |
|
|
object-fit: cover; |
|
|
} |
|
|
#player-box { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
max-width: 100vw; |
|
|
max-height: 100vh; |
|
|
border-radius: 0 !important; |
|
|
} |
|
|
.controls { |
|
|
bottom: 15%; |
|
|
left: 0; |
|
|
width: 100vw; |
|
|
justify-content: center; |
|
|
padding-bottom: env(safe-area-inset-bottom, 0); |
|
|
} |
|
|
button { |
|
|
font-size: 15px; |
|
|
padding: 10px 0; |
|
|
width: 36vw; |
|
|
max-width: 120px; |
|
|
} |
|
|
.info { |
|
|
font-size: 12px; |
|
|
left: 8px; |
|
|
top: 8px; |
|
|
} |
|
|
} |
|
|
@media (hover: none) and (pointer: coarse) { |
|
|
.controls { |
|
|
opacity: 1 !important; |
|
|
pointer-events: auto !important; |
|
|
} |
|
|
.info { |
|
|
opacity: 1 !important; |
|
|
} |
|
|
} |
|
|
button { |
|
|
padding: 6px 0; |
|
|
width: 28vw; |
|
|
max-width: 80px; |
|
|
font-size: 13px; |
|
|
border: none; |
|
|
border-radius: 14px; |
|
|
background: rgba(40,40,40,0.05); |
|
|
color: #fff; |
|
|
cursor: pointer; |
|
|
transition: background 0.2s; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
button:active { |
|
|
background: rgba(64,158,255,0.05); |
|
|
} |
|
|
.guide-tip { |
|
|
position: fixed; |
|
|
top: 18%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: rgba(30,30,40,0.92); |
|
|
color: #fff; |
|
|
padding: 18px 28px; |
|
|
border-radius: 18px; |
|
|
font-size: 17px; |
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.18); |
|
|
z-index: 9999; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
.guide-tip.show { |
|
|
opacity: 1; |
|
|
pointer-events: auto; |
|
|
} |
|
|
#blur-bg-canvas { |
|
|
position: fixed; |
|
|
left: 0; top: 0; width: 100vw; height: 100vh; |
|
|
z-index: 0; |
|
|
pointer-events: none; |
|
|
filter: blur(36px) brightness(0.82) saturate(1.18) hue-rotate(-6deg); |
|
|
opacity: 0.82; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="player-box"> |
|
|
<div class="video-wrap"> |
|
|
<video id="videoPlayer" controls autoplay playsinline webkit-playsinline> |
|
|
<source id="videoSource" src="" type="video/mp4"> |
|
|
您的浏览器不支持 video 标签。 |
|
|
</video> |
|
|
<div class="loading-spinner" id="loadingSpinner" style="display:none;"></div> |
|
|
<div class="load-fail-tip" id="loadFailTip">视频加载失败，已自动切换下一个</div> |
|
|
<div class="controls"> |
|
|
<button id="loopBtn" aria-label="切换循环模式" tabindex="0"> |
|
|
<span id="loopText">loop：关</span> |
|
|
</button> |
|
|
<button id="nextBtn" aria-label="下一个视频" tabindex="0"> |
|
|
<span style="vertical-align:middle;display:inline-block;width:18px;height:18px;line-height:0;"> |
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> |
|
|
</span> |
|
|
<span style="margin-left:4px;">Next</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="info" id="videoInfo"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="guide-tip" id="guideTip">手机点击屏幕可切换视频，长按可切换循环模式</div> |
|
|
<script> |
|
|
|
|
|
let videoList = []; |
|
|
let currentIndex = 0; |
|
|
const videoPlayer = document.getElementById('videoPlayer'); |
|
|
const videoSource = document.getElementById('videoSource'); |
|
|
const loopBtn = document.getElementById('loopBtn'); |
|
|
const nextBtn = document.getElementById('nextBtn'); |
|
|
const videoInfo = document.getElementById('videoInfo'); |
|
|
const loadingSpinner = document.getElementById('loadingSpinner'); |
|
|
const loadFailTip = document.getElementById('loadFailTip'); |
|
|
const loopText = document.getElementById('loopText'); |
|
|
|
|
|
function showLoading() { |
|
|
loadingSpinner.style.display = 'block'; |
|
|
} |
|
|
function hideLoading() { |
|
|
loadingSpinner.style.display = 'none'; |
|
|
} |
|
|
function showFailTip() { |
|
|
loadFailTip.style.display = 'block'; |
|
|
setTimeout(() => { loadFailTip.style.display = 'none'; }, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
fetch('urls.json').then(r => r.json()).then(list => { |
|
|
videoList = list; |
|
|
if (videoList.length === 0) { |
|
|
videoInfo.textContent = '未找到可播放的视频。'; |
|
|
videoPlayer.style.display = 'none'; |
|
|
nextBtn.disabled = true; |
|
|
loopBtn.disabled = true; |
|
|
return; |
|
|
} |
|
|
|
|
|
let initialIdx = 0; |
|
|
if (videoList.length > 1) { |
|
|
initialIdx = Math.floor(Math.random() * videoList.length); |
|
|
} |
|
|
updateVideo(initialIdx); |
|
|
}); |
|
|
|
|
|
function updateVideo(idx) { |
|
|
if (videoList.length === 0) return; |
|
|
currentIndex = idx; |
|
|
videoPlayer.classList.remove('video-fade-in'); |
|
|
videoPlayer.classList.add('video-fade'); |
|
|
setTimeout(() => { |
|
|
videoSource.src = videoList[currentIndex]; |
|
|
videoPlayer.load(); |
|
|
videoInfo.textContent = `当前视频：${currentIndex + 1} / ${videoList.length}`; |
|
|
}, 200); |
|
|
} |
|
|
videoPlayer.addEventListener('canplay', function() { |
|
|
videoPlayer.classList.remove('video-fade'); |
|
|
videoPlayer.classList.add('video-fade-in'); |
|
|
}); |
|
|
videoSource.addEventListener('error', function() { |
|
|
setTimeout(() => { |
|
|
let nextIdx = getRandomNextIndex(); |
|
|
updateVideo(nextIdx); |
|
|
}, 200); |
|
|
}); |
|
|
loopBtn.onclick = function() { |
|
|
videoPlayer.loop = !videoPlayer.loop; |
|
|
loopText.textContent = 'loop：' + (videoPlayer.loop ? '开' : '关'); |
|
|
}; |
|
|
function getRandomNextIndex() { |
|
|
if (videoList.length <= 1) return 0; |
|
|
let nextIdx; |
|
|
do { |
|
|
nextIdx = Math.floor(Math.random() * videoList.length); |
|
|
} while (nextIdx === currentIndex); |
|
|
return nextIdx; |
|
|
} |
|
|
nextBtn.onclick = function() { |
|
|
if (videoList.length === 0) return; |
|
|
let nextIdx = getRandomNextIndex(); |
|
|
updateVideo(nextIdx); |
|
|
}; |
|
|
videoPlayer.addEventListener('ended', function() { |
|
|
if (!videoPlayer.loop) { |
|
|
let nextIdx = getRandomNextIndex(); |
|
|
updateVideo(nextIdx); |
|
|
} |
|
|
}); |
|
|
|
|
|
videoPlayer.loop = false; |
|
|
loopText.textContent = 'loop：关'; |
|
|
|
|
|
let initialIdx = 0; |
|
|
if (videoList.length > 1) { |
|
|
initialIdx = Math.floor(Math.random() * videoList.length); |
|
|
} |
|
|
updateVideo(initialIdx); |
|
|
|
|
|
|
|
|
function isMobile() { |
|
|
return /Mobi|Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent); |
|
|
} |
|
|
if (isMobile()) { |
|
|
const controls = document.querySelector('.controls'); |
|
|
const info = document.querySelector('.info'); |
|
|
let hideTimer = null; |
|
|
function showControls() { |
|
|
controls.style.opacity = '1'; |
|
|
controls.style.pointerEvents = 'auto'; |
|
|
info.style.opacity = '1'; |
|
|
if (hideTimer) clearTimeout(hideTimer); |
|
|
hideTimer = setTimeout(() => { |
|
|
controls.style.opacity = '0'; |
|
|
controls.style.pointerEvents = 'none'; |
|
|
info.style.opacity = '0'; |
|
|
}, 3000); |
|
|
} |
|
|
document.querySelector('.video-wrap').addEventListener('touchstart', showControls); |
|
|
document.querySelector('.video-wrap').addEventListener('click', showControls); |
|
|
|
|
|
setTimeout(() => { |
|
|
controls.style.opacity = '0'; |
|
|
controls.style.pointerEvents = 'none'; |
|
|
info.style.opacity = '0'; |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!isMobile()) { |
|
|
window.addEventListener('keydown', function(e) { |
|
|
if (e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'textarea') return; |
|
|
if (e.code === 'ArrowRight' || e.key === 'ArrowRight') { |
|
|
let nextIdx = getRandomNextIndex(); |
|
|
updateVideo(nextIdx); |
|
|
} else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') { |
|
|
let nextIdx = getRandomNextIndex(); |
|
|
updateVideo(nextIdx); |
|
|
} else if (e.code === 'Space' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
if (videoPlayer.paused) videoPlayer.play(); |
|
|
else videoPlayer.pause(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
loopBtn.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Enter' || e.keyCode === 13) { |
|
|
loopBtn.click(); |
|
|
} |
|
|
}); |
|
|
nextBtn.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Enter' || e.keyCode === 13) { |
|
|
nextBtn.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (!isMobile()) { |
|
|
|
|
|
let blurBgCanvas = document.getElementById('blur-bg-canvas'); |
|
|
if (!blurBgCanvas) { |
|
|
blurBgCanvas = document.createElement('canvas'); |
|
|
blurBgCanvas.id = 'blur-bg-canvas'; |
|
|
document.body.insertBefore(blurBgCanvas, document.body.firstChild); |
|
|
} |
|
|
function updateBlurBg() { |
|
|
try { |
|
|
|
|
|
const w = window.innerWidth, h = window.innerHeight; |
|
|
const scale = window.devicePixelRatio > 1.5 ? 0.25 : 0.33; |
|
|
blurBgCanvas.width = Math.round(w * scale); |
|
|
blurBgCanvas.height = Math.round(h * scale); |
|
|
const ctx = blurBgCanvas.getContext('2d'); |
|
|
ctx.drawImage(videoPlayer, 0, 0, blurBgCanvas.width, blurBgCanvas.height); |
|
|
} catch(e) {} |
|
|
} |
|
|
let blurInterval = 50; |
|
|
let blurTimer = null; |
|
|
videoPlayer.addEventListener('play', function() { |
|
|
if(blurTimer) clearInterval(blurTimer); |
|
|
blurTimer = setInterval(updateBlurBg, blurInterval); |
|
|
}); |
|
|
videoPlayer.addEventListener('pause', function(){ |
|
|
if(blurTimer) clearInterval(blurTimer); |
|
|
}); |
|
|
videoPlayer.addEventListener('ended', function(){ |
|
|
if(blurTimer) clearInterval(blurTimer); |
|
|
}); |
|
|
window.addEventListener('resize', updateBlurBg); |
|
|
|
|
|
setTimeout(updateBlurBg, blurInterval); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
