Наш сайт использует файлы cookie и другие метаданные для улучшения работы и предоставления онлайн-услуг. Оставаясь на сайте, вы соглашаетесь с условиями нашей Политики конфиденциальности.
Проект «Голос в чеке»
Видеоклипы проекта
Клип 1 / 5
Инструкция
Как работает проект «Голос в чеке»
Голос в чеке • Инструкция
0:00/0:00
Другие клипы
Ваш чек — ваш голос. Ваш голос — ваше право.
Зафиксируй своё участие • Подтверди свой регион • Защити своё право
' +
'
' + clip.dur + '
' +
'
' + clip.title + '
' + clip.tag + '
';
el.addEventListener('click', function() { loadClip(i); });
clipStrip.appendChild(el);
});
var clipEls = clipStrip.querySelectorAll('.hv-player__clip');
function formatTime(sec) {
if (isNaN(sec) || !isFinite(sec)) return '0:00';
var m = Math.floor(sec / 60);
var s = Math.floor(sec % 60);
return m + ':' + (s < 10 ? '0' : '') + s;
}
function updateUI(idx) {
current = idx;
currentIdxEl.textContent = idx + 1;
videoTitle.textContent = clips[idx].title;
videoMeta.textContent = clips[idx].meta;
videoTag.textContent = clips[idx].tag;
clipEls.forEach(function(el, i) { el.classList.toggle('hv-player__clip--active', i === idx); });
/* Scroll active clip into view */
var activeEl = clipEls[idx];
if (activeEl) {
var strip = clipStrip;
var left = activeEl.offsetLeft - strip.offsetLeft - (strip.offsetWidth / 2 - activeEl.offsetWidth / 2);
strip.scrollTo({ left: Math.max(0, left), behavior: 'smooth' });
}
}
function loadClip(idx) {
if (idx === current && isPlaying) { togglePlay(); return; }
if (idx === current && !isPlaying && video.src) { togglePlay(); return; }
updateUI(idx);
video.poster = clips[idx].thumb;
if (clips[idx].src) {
video.src = clips[idx].src;
video.load();
video.play().then(function() {
isPlaying = true;
playBtn.classList.add('is-playing');
bigPlay.classList.add('is-playing');
}).catch(function() {});
} else {
video.removeAttribute('src');
video.load();
isPlaying = false;
playBtn.classList.remove('is-playing');
bigPlay.classList.remove('is-playing');
progressFill.style.width = '0%';
timeElapsed.textContent = '0:00';
timeTotal.textContent = clips[idx].dur;
}
}
function togglePlay() {
if (!clips[current].src) return;
if (!video.src) { loadClip(current); return; }
if (video.paused) {
video.play().then(function() {
isPlaying = true;
playBtn.classList.add('is-playing');
bigPlay.classList.add('is-playing');
}).catch(function() {});
} else {
video.pause();
isPlaying = false;
playBtn.classList.remove('is-playing');
bigPlay.classList.remove('is-playing');
}
}
function nextClip() { loadClip((current + 1) % clips.length); }
function prevClip() {
if (video.currentTime > 3 && isPlaying) { video.currentTime = 0; return; }
loadClip((current - 1 + clips.length) % clips.length);
}
function seekFromEvent(e) {
if (!video.duration) return;
var rect = progressWrap.getBoundingClientRect();
var clientX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
var pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
video.currentTime = pct * video.duration;
}
function toggleMute() {
video.muted = !video.muted;
updateVolIcon();
}
function updateVolIcon() {
var vol = video.muted ? 0 : video.volume;
var paths = [
'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z',
'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'
];
var idx = vol === 0 ? 2 : vol < 0.5 ? 1 : 0;
volIcon.innerHTML = '';
}
/* Events */
bigPlay.addEventListener('click', togglePlay);
playBtn.addEventListener('click', togglePlay);
nextBtn.addEventListener('click', nextClip);
prevBtn.addEventListener('click', prevClip);
muteBtn.addEventListener('click', toggleMute);
volSlider.addEventListener('input', function() {
var v = parseInt(volSlider.value);
video.volume = v / 100;
video.muted = false;
updateVolIcon();
});
video.addEventListener('loadedmetadata', function() {
timeTotal.textContent = formatTime(video.duration);
progressFill.style.width = '0%';
timeElapsed.textContent = '0:00';
});
video.addEventListener('timeupdate', function() {
if (!video.duration) return;
var pct = (video.currentTime / video.duration) * 100;
progressFill.style.width = pct + '%';
timeElapsed.textContent = formatTime(video.currentTime);
});
video.addEventListener('ended', function() { nextClip(); });
progressTouch.addEventListener('click', seekFromEvent);
progressTouch.addEventListener('touchend', function(e) {
e.preventDefault();
seekFromEvent(e);
});
/* Fullscreen */
fullscreenBtn.addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else if (screenWrap.requestFullscreen) {
screenWrap.requestFullscreen();
}
});
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement === screenWrap) {
screenWrap.classList.add('is-fullscreen');
controlsBar.classList.add('always-show');
} else {
screenWrap.classList.remove('is-fullscreen');
}
});
/* Click on video area to toggle play */
video.addEventListener('click', function(e) {
if (e.target === video) togglePlay();
});
/* Hide controls bar after inactivity */
var hideTimer = null;
function showControls() {
controlsBar.classList.add('always-show');
clearTimeout(hideTimer);
hideTimer = setTimeout(function() {
if (isPlaying) controlsBar.classList.remove('always-show');
}, 3000);
}
screenWrap.addEventListener('mousemove', showControls);
screenWrap.addEventListener('touchstart', showControls);
/* Init */
video.poster = clips[0].thumb;
timeTotal.textContent = clips[0].dur;
updateUI(0);
})();
