sebastjan/folx-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ozadje playerja: rotacija med 4 FOLX slikami s crossfade (stisnjene na 1600px)

Browse Source
This commit is contained in:
Sebastjan 2026-07-07 09:59:24 +00:00
parent a16c3df873
commit 50c754718b
5 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/bg/bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/assets/bg/bg2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/assets/bg/bg3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

BIN
public/assets/bg/bg4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

23
views/index.ejs
View File

@ -37,7 +37,8 @@
.player-col { width: min(900px, 100%); margin: 0 auto; }
.player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: #0A0A0A; }
.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; }
.stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; }
.stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; opacity: 1; transition: opacity 1.2s ease; }
.stage-poster.b { opacity: 0; }
.scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; }
.msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
.msg.hidden { display:none; }
@ -70,7 +71,8 @@
<main class="stage-wrap">
<div class="player-col">
<div class="player-frame" id="playerFrame">
<img class="stage-poster" id="poster" src="/assets/stage_folx_v2.png" alt="" />
<img class="stage-poster" id="posterA" src="/assets/bg/bg1.jpg" alt="" />
<img class="stage-poster b" id="posterB" src="/assets/bg/bg2.jpg" alt="" />
<div class="scrim"></div>
<video id="v" autoplay muted playsinline tabindex="-1" disablepictureinpicture
controlsList="nodownload noremoteplayback noplaybackrate"></video>
@ -107,11 +109,24 @@
var HLS_URL = <%- JSON.stringify(hlsUrl) %>;
var video = document.getElementById('v');
var msg = document.getElementById('msg');
var poster = document.getElementById('poster');
var posterA = document.getElementById('posterA');
var posterB = document.getElementById('posterB');
var hls = null;
function hideMsg(){ msg.classList.add('hidden'); poster.style.display='none'; }
function hideMsg(){ msg.classList.add('hidden'); posterA.style.display='none'; posterB.style.display='none'; }
function showMsg(){ msg.classList.remove('hidden'); }
// Rotirajoce ozadje (crossfade) dokler se video ne nalozi
var bgList = ['/assets/bg/bg1.jpg','/assets/bg/bg2.jpg','/assets/bg/bg3.jpg','/assets/bg/bg4.jpg'];
var bgIdx = 1, showingA = true;
bgList.forEach(function(s){ var im = new Image(); im.src = s; }); // predpomni
setInterval(function(){
if (posterA.style.display === 'none') return; // video tece, ne rotiraj
bgIdx = (bgIdx + 1) % bgList.length;
if (showingA) { posterB.src = bgList[bgIdx]; posterB.classList.remove('b'); posterA.classList.add('b'); }
else { posterA.src = bgList[bgIdx]; posterA.classList.remove('b'); posterB.classList.add('b'); }
showingA = !showingA;
}, 4000);
function start(){
try { hls && hls.destroy(); } catch(e){}
hls = null;