Login to your account

JW Player

<!DOCTYPE html>
<html lang=”bn”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Movie Player UI</title>
<style>
:root{
–bg:#0b0c10;
–panel:#14161c;
–accent-red:#ff2d55;
–accent-green:#38ff9c;
–accent-blue:#2d7fff;
–text:#eef0f3;
–muted:#9aa0ab;
}
*{box-sizing:border-box;}
body{
margin:0;
min-height:100vh;
background:var(–bg);
display:flex;
align-items:center;
justify-content:center;
padding:40px 16px;
font-family:’Segoe UI’, system-ui, -apple-system, sans-serif;
}

.player-wrap{
width:100%;
max-width:960px;
}

/* — RGB Glow Border — */
.glow-border{
position:relative;
border-radius:14px;
padding:3px;
background:linear-gradient(120deg,
var(–accent-red), var(–accent-blue), var(–accent-green),
var(–accent-red));
background-size:300% 300%;
animation:glowShift 6s ease infinite;
box-shadow:0 0 25px rgba(255,45,85,.35), 0 0 45px rgba(45,127,255,.25);
}

@keyframes glowShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.player-inner{
background:var(–panel);
border-radius:11px;
overflow:hidden;
}

/* — Video / iframe stage — */
.video-stage{
position:relative;
aspect-ratio:16/9;
width:100%;
background:#000;
overflow:hidden;
}

.video-stage video,
.video-stage iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:none;
}
.video-stage video.active,
.video-stage iframe.active{
display:block;
}

/* Poster shown before first play */
.poster-layer{
position:absolute;
inset:0;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(150deg, #1c2b4a 0%, #101826 55%, #0a0d14 100%);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2;
transition:opacity .25s ease;
}
.poster-layer.hidden{
opacity:0;
pointer-events:none;
}

.watermark{
position:absolute;
top:16px;
right:18px;
font-weight:800;
letter-spacing:.5px;
font-size:15px;
color:var(–accent-red);
text-shadow:0 0 12px rgba(255,45,85,.6);
z-index:3;
user-select:none;
pointer-events:none;
}

.loading-label{
position:absolute;
bottom:14px;
left:18px;
font-size:12px;
color:var(–muted);
background:rgba(0,0,0,.5);
padding:4px 10px;
border-radius:6px;
z-index:3;
display:none;
}
.loading-label.show{ display:block; }

/* — Play button — */
.play-btn{
width:88px;
height:88px;
border-radius:50%;
background:rgba(255,255,255,.08);
backdrop-filter:blur(4px);
border:2px solid rgba(255,255,255,.5);
display:flex;
align-items:center;
justify-content:center;
position:relative;
transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.play-btn::after,
.play-btn::before{
content:””;
position:absolute;
inset:0;
border-radius:50%;
border:2px solid var(–accent-blue);
opacity:0;
animation:ripple 2.4s ease-out infinite;
}
.play-btn::before{ animation-delay:1.2s; }

@keyframes ripple{
0%{transform:scale(1); opacity:.7;}
100%{transform:scale(1.6); opacity:0;}
}

.play-btn svg{
width:30px;
height:30px;
margin-left:4px;
fill:#fff;
}

.poster-layer:hover .play-btn{
transform:scale(1.08);
background:rgba(255,255,255,.16);
border-color:#fff;
}

/* — Info bar — */
.info-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 18px;
background:#0f1116;
border-top:1px solid rgba(255,255,255,.06);
}

.movie-title{
font-size:15px;
font-weight:600;
color:var(–text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.fullscreen-btn{
flex-shrink:0;
display:flex;
align-items:center;
gap:6px;
background:transparent;
border:1px solid rgba(255,255,255,.25);
color:var(–text);
padding:8px 14px;
border-radius:6px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background .2s ease, border-color .2s ease;
}
.fullscreen-btn:hover{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.5);
}
.fullscreen-btn svg{ width:14px; height:14px; fill:currentColor; }

/* — Trailer button — */
.trailer-row{
display:flex;
justify-content:center;
margin-top:18px;
}

.trailer-btn{
display:flex;
align-items:center;
gap:8px;
padding:11px 26px;
border-radius:8px;
border:1px solid rgba(56,255,156,.4);
background:linear-gradient(135deg, rgba(56,255,156,.14), rgba(56,255,156,.03));
color:var(–accent-green);
font-size:14px;
font-weight:700;
letter-spacing:.3px;
cursor:pointer;
transition:all .2s ease;
}
.trailer-btn:hover{
background:linear-gradient(135deg, rgba(56,255,156,.24), rgba(56,255,156,.06));
border-color:var(–accent-green);
box-shadow:0 0 16px rgba(56,255,156,.35);
}
.trailer-btn svg{ width:15px; height:15px; fill:currentColor; }

/* — Server buttons — */
.server-row{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:16px;
}

.server-btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 22px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:#15171d;
color:var(–text);
font-size:14px;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
position:relative;
}

.server-btn .dot{
width:8px;
height:8px;
border-radius:50%;
background:var(–muted);
transition:background .2s ease, box-shadow .2s ease;
}

.server-btn.active{
background:linear-gradient(135deg, rgba(255,45,85,.18), rgba(255,45,85,.04));
border-color:var(–accent-red);
color:#fff;
}
.server-btn.active .dot{
background:var(–accent-red);
box-shadow:0 0 8px var(–accent-red);
}

.server-btn:not(.active):hover{
border-color:rgba(255,255,255,.35);
background:#1a1d24;
}

@media (max-width:520px){
.movie-title{ font-size:13px; }
.fullscreen-btn span{ display:none; }
.fullscreen-btn{ padding:8px 10px; }
.play-btn{ width:64px; height:64px; }
.play-btn svg{ width:22px; height:22px; }
.watermark{ font-size:12px; top:10px; right:12px; }
.server-btn{ padding:9px 16px; font-size:13px; }
}
</style>
</head>
<body>

<!– Poster / click-to-play overlay –>
<div class=”poster-layer” id=”posterLayer”>
<div class=”watermark”>YOURSITE.COM</div>
<div class=”play-btn” id=”playBtn”>
<svg viewBox=”0 0 24 24″><path d=”M8 5v14l11-7z”/></svg>
</div>
<div class=”loading-label” id=”loadingLabel”>লোড হচ্ছে…</div>
</div>

<!– Real video element (Server 1 & 2: direct mp4 sources) –>
<video id=”videoEl” controls playsinline></video>

<!– Iframe embed (Server 3: e.g. external embed player) –>
<iframe id=”iframeEl” allowfullscreen allow=”autoplay; encrypted-media”></iframe>

</div>

<div class=”info-bar”>
<div class=”movie-title” id=”movieTitle”>Movie Title (Year) Dual Audio [Hindi-English]</div>
<button class=”fullscreen-btn” id=”fsBtn”>
<svg viewBox=”0 0 24 24″><path d=”M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z”/></svg>
<span>Full Screen</span>
</button>
</div>
</div>
</div>

<div class=”trailer-row”>
<button class=”trailer-btn” id=”trailerBtn”>
<svg viewBox=”0 0 24 24″><path d=”M8 5v14l11-7z”/></svg>
Watch Trailer
</button>
</div>

<div class=”server-row” id=”servers”>
<button class=”server-btn active” data-server=”1″><span class=”dot”></span>Server 1</button>
<button class=”server-btn” data-server=”2″><span class=”dot”></span>Server 2</button>
<button class=”server-btn” data-server=”3″><span class=”dot”></span>Server 3</button>
</div>
</div>

const videoEl = document.getElementById(‘videoEl’);
const iframeEl = document.getElementById(‘iframeEl’);
const posterLayer = document.getElementById(‘posterLayer’);
const loadingLabel = document.getElementById(‘loadingLabel’);
const stage = document.getElementById(‘stage’);

let currentServer = 1;
let hasStartedPlaying = false;

function loadServer(id, autoplay){
const cfg = SOURCES[id];
if(!cfg) return;

loadingLabel.classList.add(‘show’);
videoEl.classList.remove(‘active’);
iframeEl.classList.remove(‘active’);
videoEl.pause();
videoEl.removeAttribute(‘src’);
iframeEl.src = ”;

if(cfg.type === “mp4”){
videoEl.src = cfg.src;
videoEl.classList.add(‘active’);
videoEl.oncanplay = () => {
loadingLabel.classList.remove(‘show’);
if(autoplay) videoEl.play().catch(()=>{});
};
} else if(cfg.type === “iframe”){
iframeEl.src = cfg.src;
iframeEl.classList.add(‘active’);
// iframes give no reliable load event across origins, so just hide the spinner shortly after
setTimeout(()=> loadingLabel.classList.remove(‘show’), 800);
}

currentServer = id;
}

// Click poster -> start playback on the currently selected server
posterLayer.addEventListener(‘click’, ()=>{
hasStartedPlaying = true;
posterLayer.classList.add(‘hidden’);
loadServer(currentServer, true);
});

// Server switch buttons
document.getElementById(‘servers’).addEventListener(‘click’, (e)=>{
const btn = e.target.closest(‘.server-btn’);
if(!btn) return;

document.querySelectorAll(‘.server-btn’).forEach(b=>b.classList.remove(‘active’));
btn.classList.add(‘active’);

const id = parseInt(btn.dataset.server, 10);

if(hasStartedPlaying){
// already playing -> switch source immediately, keep playing
loadServer(id, true);
} else {
// not started yet -> just remember choice, poster still showing
currentServer = id;
}
});

// Trailer button placeholder — hook up to your trailer source similarly
document.getElementById(‘trailerBtn’).addEventListener(‘click’, ()=>{
alert(‘এখানে ট্রেইলার ভিডিও/মোডাল যুক্ত করুন (YouTube embed বা modal player)।’);
});

// Fullscreen targets the whole stage (works for both video and iframe)
document.getElementById(‘fsBtn’).addEventListener(‘click’, ()=>{
if(stage.requestFullscreen) stage.requestFullscreen();
else if(stage.webkitRequestFullscreen) stage.webkitRequestFullscreen();
});
</script>

</body>
</html>

💬 Discussion & Comments

Comments are closed.