Switch to Rok viprime embed widget on main page (test how DVR + native controls behave)
This commit is contained in:
Sebastjan
parent
63679fe786
commit
4caa948d98
188
views/index.ejs
188
views/index.ejs
@ -506,21 +506,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="player-frame" id="playerFrame">
|
<div class="player-frame" id="playerFrame">
|
||||||
<video id="v" autoplay muted playsinline tabindex="-1"
|
<script src="https://livestream1.viprime.net/embed/stream1_dvr.js"></script>
|
||||||
disablepictureinpicture
|
|
||||||
controlsList="nodownload nofullscreen noremoteplayback noplaybackrate"></video>
|
|
||||||
|
|
||||||
<div class="player-msg visible" id="msg">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<div>Stream wird geladen…</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="player-overlay">
|
|
||||||
<div class="player-controls">
|
|
||||||
<button class="pctl" id="btnAudio" aria-label="Ton umschalten" title="Ton umschalten">🔇</button>
|
|
||||||
<button class="pctl" id="btnFs" aria-label="Vollbild" title="Vollbild">⛶</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@ -631,177 +617,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js"></script>
|
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
const HLS_URL = <%- JSON.stringify(hlsUrl) %>;
|
|
||||||
const video = document.getElementById('v');
|
|
||||||
const msg = document.getElementById('msg');
|
|
||||||
const playerFrame = document.getElementById('playerFrame');
|
|
||||||
|
|
||||||
let hls = null;
|
|
||||||
function showMsg(html) { msg.innerHTML = html; msg.classList.add('visible'); }
|
|
||||||
function hideMsg() { msg.classList.remove('visible'); }
|
|
||||||
|
|
||||||
function attach() {
|
|
||||||
try { hls && hls.destroy(); } catch (e) {}
|
|
||||||
hls = null;
|
|
||||||
|
|
||||||
if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
||||||
video.src = HLS_URL;
|
|
||||||
video.play().catch(() => {});
|
|
||||||
video.addEventListener('playing', hideMsg, { once: true });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.Hls && window.Hls.isSupported()) {
|
|
||||||
hls = new Hls({
|
|
||||||
liveDurationInfinity: true,
|
|
||||||
liveSyncDurationCount: 4,
|
|
||||||
backBufferLength: 30,
|
|
||||||
maxBufferLength: 60,
|
|
||||||
manifestLoadingTimeOut: 10000,
|
|
||||||
manifestLoadingMaxRetry: 6,
|
|
||||||
fragLoadingTimeOut: 20000,
|
|
||||||
fragLoadingMaxRetry: 6,
|
|
||||||
startLevel: -1,
|
|
||||||
capLevelToPlayerSize: false,
|
|
||||||
abrEwmaDefaultEstimate: 3000000,
|
|
||||||
testBandwidth: true,
|
|
||||||
abrBandWidthFactor: 0.95,
|
|
||||||
abrBandWidthUpFactor: 0.7,
|
|
||||||
});
|
|
||||||
hls.loadSource(HLS_URL);
|
|
||||||
hls.attachMedia(video);
|
|
||||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
||||||
// ABR enabled across ALL variants (1080p / 720p / 480p)
|
|
||||||
// Rok synced all 3 variants — same MEDIA-SEQUENCE base, encoder restarted.
|
|
||||||
hideMsg();
|
|
||||||
video.play().catch(() => setTimeout(() => video.play().catch(() => {}), 200));
|
|
||||||
});
|
|
||||||
hls.on(Hls.Events.ERROR, (_e, data) => {
|
|
||||||
if (!data.fatal) return;
|
|
||||||
showMsg('<div class="spinner"></div><div>Verbindung wird wiederhergestellt…</div>');
|
|
||||||
setTimeout(() => { attach(); }, 3000);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
showMsg('<div>HLS wird von diesem Browser nicht unterstützt.</div>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
attach();
|
|
||||||
|
|
||||||
// Stall detection
|
|
||||||
let lastT = 0, stalls = 0;
|
|
||||||
setInterval(() => {
|
|
||||||
if (video.paused) { video.play().catch(() => {}); return; }
|
|
||||||
if (video.currentTime === lastT && !video.seeking) {
|
|
||||||
stalls++;
|
|
||||||
if (stalls >= 3) {
|
|
||||||
stalls = 0;
|
|
||||||
showMsg('<div class="spinner"></div><div>Verbindung wird wiederhergestellt…</div>');
|
|
||||||
setTimeout(() => { attach(); }, 500);
|
|
||||||
}
|
|
||||||
} else stalls = 0;
|
|
||||||
lastT = video.currentTime;
|
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
// Live-only mode (Twitch style) — pause is disabled.
|
|
||||||
// If anything pauses the video, resume immediately AND seek to the live edge.
|
|
||||||
function seekToLive() {
|
|
||||||
try {
|
|
||||||
if (hls && hls.liveSyncPosition) {
|
|
||||||
video.currentTime = hls.liveSyncPosition;
|
|
||||||
} else if (video.seekable && video.seekable.length > 0) {
|
|
||||||
video.currentTime = video.seekable.end(video.seekable.length - 1);
|
|
||||||
}
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
video.addEventListener('pause', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
seekToLive();
|
|
||||||
video.play().catch(() => {});
|
|
||||||
}, 80);
|
|
||||||
});
|
|
||||||
// If user seeks back, force forward to live
|
|
||||||
video.addEventListener('seeked', () => {
|
|
||||||
if (!hls) return;
|
|
||||||
if (hls.liveSyncPosition && video.currentTime < hls.liveSyncPosition - 10) {
|
|
||||||
video.currentTime = hls.liveSyncPosition;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// Block right-click context menu
|
|
||||||
video.addEventListener('contextmenu', (e) => e.preventDefault());
|
|
||||||
video.disablePictureInPicture = true;
|
|
||||||
video.setAttribute('disablePictureInPicture', 'true');
|
|
||||||
try { video.disableRemotePlayback = true; } catch (e) {}
|
|
||||||
|
|
||||||
// Block keyboard shortcuts that could pause: spacebar, K, Media keys
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
const tag = (e.target && e.target.tagName) || '';
|
|
||||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
|
|
||||||
if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space' ||
|
|
||||||
e.key === 'k' || e.key === 'K' ||
|
|
||||||
e.key === 'MediaPlayPause' || e.key === 'MediaPause') {
|
|
||||||
e.preventDefault();
|
|
||||||
if (video.paused) {
|
|
||||||
seekToLive();
|
|
||||||
video.play().catch(() => {});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('visibilitychange', () => {
|
|
||||||
if (!document.hidden) {
|
|
||||||
seekToLive();
|
|
||||||
video.play().catch(() => {});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Audio toggle (custom button)
|
|
||||||
const btnAudio = document.getElementById('btnAudio');
|
|
||||||
const btnFs = document.getElementById('btnFs');
|
|
||||||
function updateAudio() {
|
|
||||||
btnAudio.textContent = video.muted ? '🔇' : '🔊';
|
|
||||||
btnAudio.title = video.muted ? 'Ton einschalten' : 'Stummschalten';
|
|
||||||
}
|
|
||||||
updateAudio();
|
|
||||||
btnAudio.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
video.muted = !video.muted;
|
|
||||||
video.volume = 1.0;
|
|
||||||
updateAudio();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fullscreen — handle iOS Safari separately
|
|
||||||
function enterFullscreen() {
|
|
||||||
if (typeof video.webkitEnterFullscreen === 'function' && !document.fullscreenEnabled) {
|
|
||||||
try { video.webkitEnterFullscreen(); return; } catch (e) {}
|
|
||||||
}
|
|
||||||
if (video.requestFullscreen) { video.requestFullscreen().catch(() => {}); return; }
|
|
||||||
if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); return; }
|
|
||||||
if (playerFrame.requestFullscreen) { playerFrame.requestFullscreen().catch(() => {}); return; }
|
|
||||||
if (playerFrame.webkitRequestFullscreen) { playerFrame.webkitRequestFullscreen(); return; }
|
|
||||||
if (typeof video.webkitEnterFullscreen === 'function') {
|
|
||||||
try { video.webkitEnterFullscreen(); } catch (e) {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function exitFullscreen() {
|
|
||||||
if (document.exitFullscreen) { document.exitFullscreen().catch(() => {}); return; }
|
|
||||||
if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); return; }
|
|
||||||
if (typeof video.webkitExitFullscreen === 'function') { try { video.webkitExitFullscreen(); } catch (e) {} }
|
|
||||||
}
|
|
||||||
function isFullscreen() {
|
|
||||||
return !!(document.fullscreenElement || document.webkitFullscreenElement || video.webkitDisplayingFullscreen);
|
|
||||||
}
|
|
||||||
btnFs.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (isFullscreen()) exitFullscreen();
|
|
||||||
else enterFullscreen();
|
|
||||||
});
|
|
||||||
// Tap on video = audio toggle, double = fullscreen
|
|
||||||
video.addEventListener('click', () => { video.muted = !video.muted; video.volume = 1.0; updateAudio(); });
|
|
||||||
video.addEventListener('dblclick', (e) => { e.preventDefault(); btnFs.click(); });
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user