<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css"/>
<style>
body { margin: 0; background: #000; }
.plyr { width: 100%; }
</style>
</head>
<body>
<video id="player" playsinline controls>
<source src="VIDEO_URL_PLACEHOLDER" type="video/mp4"/>
</video>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
const player = new Plyr('#player', {
controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
autoplay: true
});
// 添加缓冲动画
player.on('waiting', () => {
document.getElementById('loading').style.display = 'flex';
});
player.on('playing', () => {
document.getElementById('loading').style.display = 'none';
});
</script>
<div id="loading" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:20px;">
⏳ 缓冲中...
</div>
</body>
</html>
