feat: add IPTV player with HLS.js and mpegts.js for stream playback and parent communication.

This commit is contained in:
Michael committed 2025-12-07 15:05:01 +01:00
1 parent 38f3f9c96b
commit 9cb193b9f7
1 file changed
+22 -6
+22 -6
View File
@@ -97,7 +97,8 @@
<body> <body>
<div id="player-container"> <div id="player-container">
<video id="video" autoplay></video> <!-- paysinline is CRITICAL for iOS to play inline instead of fullscreen -->
<video id="video" autoplay playsinline></video>
<div id="loading"> <div id="loading">
<div class="spinner"></div> <div class="spinner"></div>
<div id="loading-text">Loading stream...</div> <div id="loading-text">Loading stream...</div>
@@ -344,7 +345,10 @@
hls.on(Hls.Events.MANIFEST_PARSED, () => { hls.on(Hls.Events.MANIFEST_PARSED, () => {
log('HLS manifest parsed, starting playback'); log('HLS manifest parsed, starting playback');
hideLoading(); hideLoading();
video.play().catch(e => log('Autoplay prevented: ' + e)); video.play().catch(e => {
log('Autoplay prevented: ' + e);
window.parent.postMessage({ type: 'playback_status', status: 'paused' }, '*');
});
}); });
// Better error recovery // Better error recovery
@@ -406,7 +410,10 @@
video.addEventListener('canplay', () => { video.addEventListener('canplay', () => {
log('MPEG-TS stream ready'); log('MPEG-TS stream ready');
hideLoading(); hideLoading();
video.play().catch(e => log('Autoplay prevented: ' + e)); video.play().catch(e => {
log('Autoplay prevented: ' + e);
window.parent.postMessage({ type: 'playback_status', status: 'paused' }, '*');
});
}); });
video.addEventListener('error', (e) => { video.addEventListener('error', (e) => {
@@ -440,7 +447,10 @@
video.addEventListener('canplay', () => { video.addEventListener('canplay', () => {
hideLoading(); hideLoading();
video.play().catch(e => log('Autoplay prevented: ' + e)); video.play().catch(e => {
log('Autoplay prevented: ' + e);
window.parent.postMessage({ type: 'playback_status', status: 'paused' }, '*');
});
}, { once: true }); }, { once: true });
video.addEventListener('error', (e) => { video.addEventListener('error', (e) => {
@@ -514,7 +524,10 @@
const onCanPlay = () => { const onCanPlay = () => {
playStarted = true; playStarted = true;
hideLoading(); hideLoading();
video.play().catch(e => log('Autoplay prevented: ' + e)); video.play().catch(e => {
log('Autoplay prevented: ' + e);
window.parent.postMessage({ type: 'playback_status', status: 'paused' }, '*');
});
}; };
const onError = async () => { const onError = async () => {
@@ -550,7 +563,10 @@
video.addEventListener('canplay', () => { video.addEventListener('canplay', () => {
hideLoading(); hideLoading();
video.play().catch(e => log('Autoplay prevented: ' + e)); video.play().catch(e => {
log('Autoplay prevented: ' + e);
window.parent.postMessage({ type: 'playback_status', status: 'paused' }, '*');
});
}, { once: true }); }, { once: true });
video.addEventListener('error', async () => { video.addEventListener('error', async () => {