Files
Hightube/frontend/web/flv_player.html
2026-04-01 11:30:52 +08:00

100 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Hightube FLV Player</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
color: #fff;
}
#player,
#message {
width: 100%;
height: 100%;
}
#player {
display: none;
object-fit: contain;
background: #000;
}
#message {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
box-sizing: border-box;
}
</style>
<script src="flv.min.js"></script>
</head>
<body>
<video id="player" controls autoplay muted playsinline></video>
<div id="message">Loading live stream...</div>
<script>
const params = new URLSearchParams(window.location.search);
const streamUrl = params.get('src');
const video = document.getElementById('player');
const message = document.getElementById('message');
function showMessage(text) {
video.style.display = 'none';
message.style.display = 'flex';
message.textContent = text;
}
if (!streamUrl) {
showMessage('Missing stream URL.');
} else if (typeof flvjs === 'undefined') {
showMessage('flv.js failed to load. Check network access and reload.');
} else if (!flvjs.isSupported()) {
showMessage('This browser does not support FLV playback.');
} else {
const player = flvjs.createPlayer({
type: 'flv',
url: streamUrl,
isLive: true,
}, {
enableWorker: false,
stashInitialSize: 128,
});
player.attachMediaElement(video);
player.load();
player.play().catch(() => {});
player.on(flvjs.Events.ERROR, function(errorType, detail, info) {
const parts = ['Live stream failed to load.'];
if (errorType) parts.push('type=' + errorType);
if (detail) parts.push('detail=' + detail);
if (info && info.msg) parts.push('msg=' + info.msg);
showMessage(parts.join(' '));
});
video.style.display = 'block';
message.style.display = 'none';
window.addEventListener('beforeunload', function() {
player.destroy();
});
}
</script>
</body>
</html>