:root {
--plyr-color-main: #ff7a00;
}
.player-wrapper {
width: 100%;
position: relative;
}
video {
width: 100%;
height: auto;
}
/* LIVE индикатор */
.live-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
font-size: 12px;
font-weight: bold;
color: gray;
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: gray;
}
/* активен LIVE */
.live-active {
color: red;
}
.live-active .live-dot {
background: red;
animation: pulse 1.2s infinite;
}
/* анимация */
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.6; }
100% { transform: scale(1); opacity: 1; }
}
document.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById('player');
const source = "https://live.tvplus.my.to/hls/tvplus-1080p/index.m3u8";
let hls;
// autoplay настройки
video.muted = true;
video.autoplay = true;
video.playsInline = true;
function initPlayer() {
if (Hls.isSupported()) {
hls = new Hls({
liveSyncDuration: 2,
maxBufferLength: 10
});
hls.loadSource(source);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play().catch(() => {});
});
// auto-reconnect
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
console.log("HLS error → reconnect");
setTimeout(() => {
hls.destroy();
initPlayer();
}, 2000);
}
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = source;
video.addEventListener('loadedmetadata', () => {
video.play().catch(() => {});
});
}
}
initPlayer();
const player = new Plyr(video, {
controls: ['play', 'mute', 'volume', 'fullscreen']
});
// LIVE индикатор
setTimeout(() => {
const controls = document.querySelector('.plyr__controls');
if (controls) {
const liveEl = document.createElement('div');
liveEl.className = 'live-indicator';
liveEl.innerHTML = ' LIVE';
controls.appendChild(liveEl);
function updateLiveIndicator() {
if (!video.paused && !video.ended) {
liveEl.classList.add('live-active');
} else {
liveEl.classList.remove('live-active');
}
}
video.addEventListener('play', updateLiveIndicator);
video.addEventListener('pause', updateLiveIndicator);
video.addEventListener('playing', updateLiveIndicator);
video.addEventListener('canplay', updateLiveIndicator);
// първоначален FIX
setTimeout(updateLiveIndicator, 1000);
// винаги към LIVE при play
video.addEventListener('play', () => {
if (hls) {
hls.stopLoad();
hls.startLoad();
}
});
}
}, 500);
});