html, body {
margin: 0;
padding: 0;
background-color: #fff;
font-family: sans-serif;
}
.player-wrapper {
width: 100%;
max-width: 720px;
margin: 0 auto;
background-color: #000;
position: relative;
}
#videojs-player {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background-color: #000;
}
.poster-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
padding-top: 25%;
background: url("https://www.letutk.com/playerposter.jpg") center center / cover no-repeat;
z-index: 10;
cursor: pointer;
transition: opacity 0.3s;
}
.poster-overlay.hidden {
opacity: 0;
pointer-events: none;
}
const videoUrl = "https://cdn.tkletu.xyz/Video%20by%20Jos%C3%A9%20Guti%C3%A9rrez%20%5B879137600_456240967%5D.mp4";
const posterOverlay = document.getElementById('poster-overlay');
const videoEl = document.getElementById('videojs-player');
const player = videojs(videoEl, {
autoplay: true,
muted: true,
playsinline: true
});
player.ready(() => {
player.src({ src: videoUrl, type: 'video/mp4' });
player.play().catch(err => console.warn("自动播放失败：", err));
player.on('canplay', () => posterOverlay.classList.add('hidden'));
player.on('playing', () => posterOverlay.classList.add('hidden'));
player.on('pause', () => {
if (!player.ended()) posterOverlay.classList.remove('hidden');
});
player.on('ended', () => posterOverlay.classList.add('hidden'));
videoEl.addEventListener('dblclick', () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
videoEl.requestFullscreen().catch(err => console.warn("全屏失败：", err));
}
});
posterOverlay.addEventListener('click', () => {
if (player.paused()) {
window.location.href = "https://www.letutk.com";
}
});
});
player.on('error', () => {
console.error("Video.js 播放错误");
posterOverlay.style.display = 'block';
alert("视频播放失败，请重试");
});