138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HLS Player - RK3588 Media Server</title>
|
|
<script src="js/hls.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
.player-box {
|
|
background: #2a2a2a;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
|
}
|
|
.player-title {
|
|
padding: 10px 15px;
|
|
background: #333;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
video {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
background: #000;
|
|
}
|
|
.status {
|
|
padding: 8px 15px;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
.status.error { color: #ff6b6b; }
|
|
.status.success { color: #51cf66; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎥 HLS 实时播放器</h1>
|
|
<p style="text-align:center;color:#888;margin-top:-15px;">Port: 9000 | web_root: web/</p>
|
|
<div class="grid" id="players"></div>
|
|
|
|
<script>
|
|
const streams = [
|
|
{ name: 'Cam 1', url: '/hls/cam1/index.m3u8' },
|
|
{ name: 'Cam 2', url: '/hls/cam2/index.m3u8' },
|
|
{ name: 'Cam 3', url: '/hls/cam3/index.m3u8' },
|
|
{ name: 'Cam 4', url: '/hls/cam4/index.m3u8' },
|
|
{ name: 'Cam 5', url: '/hls/cam5/index.m3u8' }
|
|
];
|
|
|
|
function createPlayer(stream) {
|
|
const box = document.createElement('div');
|
|
box.className = 'player-box';
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'player-title';
|
|
title.textContent = stream.name;
|
|
|
|
const video = document.createElement('video');
|
|
video.controls = true;
|
|
video.muted = true; // 自动播放需要静音
|
|
video.autoplay = true;
|
|
|
|
const status = document.createElement('div');
|
|
status.className = 'status';
|
|
status.textContent = 'Initializing...';
|
|
|
|
box.appendChild(title);
|
|
box.appendChild(video);
|
|
box.appendChild(status);
|
|
document.getElementById('players').appendChild(box);
|
|
|
|
if (Hls.isSupported()) {
|
|
const hls = new Hls({
|
|
enableWorker: true,
|
|
lowLatencyMode: true,
|
|
backBufferLength: 90
|
|
});
|
|
|
|
hls.loadSource(stream.url);
|
|
hls.attachMedia(video);
|
|
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
status.textContent = '✅ Playing';
|
|
status.className = 'status success';
|
|
video.play().catch(e => console.log('Autoplay prevented:', e));
|
|
});
|
|
|
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
|
if (data.fatal) {
|
|
status.textContent = '❌ Error: ' + data.type;
|
|
status.className = 'status error';
|
|
console.error('HLS error:', data);
|
|
}
|
|
});
|
|
|
|
// 自动刷新以支持实时流
|
|
hls.on(Hls.Events.LEVEL_UPDATED, () => {
|
|
status.textContent = '✅ Playing (live)';
|
|
});
|
|
|
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
// Safari 原生支持
|
|
video.src = stream.url;
|
|
video.addEventListener('loadedmetadata', () => {
|
|
status.textContent = '✅ Playing (native)';
|
|
status.className = 'status success';
|
|
video.play();
|
|
});
|
|
} else {
|
|
status.textContent = '❌ HLS not supported';
|
|
status.className = 'status error';
|
|
}
|
|
}
|
|
|
|
// 创建所有播放器
|
|
streams.forEach(createPlayer);
|
|
</script>
|
|
</body>
|
|
</html>
|