[h1]Mарселина и Грациан. Interrogation Room[/h1]
[html]
<style>
#psv-box {
position:relative; width:100% !important; max-width:none !important;
margin:0 !important; line-height:0; border-radius:4px !important; overflow:hidden !important;
}
#psv { display:block; width:100% !important; height:auto; background:#0c0a0a; border-radius:0 !important; }
#psv-ui {
position:absolute; left:0; right:0; bottom:0;
display:flex; align-items:center; gap:14px;
padding:28px 16px 12px;
background:linear-gradient(transparent, rgba(10,8,8,.55));
}
#psv-play, #psv-mute {
width:22px; height:22px; padding:0; border:0;
background:transparent; color:#f3ece8; cursor:pointer; line-height:0;
}
#psv-bar {
-webkit-appearance:none !important; appearance:none !important;
flex:1; height:2px !important; min-height:2px !important; max-height:2px !important;
margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
outline:none; cursor:pointer; box-shadow:none !important;
background:rgba(243,236,232,.32);
}
#psv-bar::-webkit-slider-runnable-track { height:2px !important; background:transparent; border:0; }
#psv-bar::-webkit-slider-thumb {
-webkit-appearance:none; width:7px; height:7px; margin-top:-2.5px;
border:0; border-radius:50%; background:#f3ece8;
}
#psv-bar::-moz-range-track { height:2px; background:transparent; border:0; }
#psv-bar::-moz-range-thumb { width:7px; height:7px; border:0; border-radius:50%; background:#f3ece8; }
</style>
<div id="psv-box">
<video id="psv" loop muted playsinline preload="metadata" src="https://forumstatic.ru/files/0011/b8/a1/80659.mp4"></video>
<div id="psv-ui">
<button id="psv-play" type="button" aria-label="пуск">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
</button>
<input id="psv-bar" type="range" min="0" max="1000" value="0">
<button id="psv-mute" type="button" aria-label="звук">
<svg id="psv-ico" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"></svg>
</button>
</div>
</div>
<script>
(function () {
var v = document.getElementById("psv");
var bar = document.getElementById("psv-bar");
var play = document.getElementById("psv-play");
var mute = document.getElementById("psv-mute");
var ico = document.getElementById("psv-ico");
var drag = false;
var playIco = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>';
var pauseIco = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M6 5h3.2v14H6zm8.8 0H18v14h-3.2z" fill="currentColor"/></svg>';
function soundIco(on) {
ico.innerHTML = on
? '<path d="M4 9h3.5L12 5.5v13L7.5 15H4z" fill="currentColor" stroke="none"/><path d="M15.5 9.2a3.4 3.4 0 010 5.6"/>'
: '<path d="M4 9h3.5L12 5.5v13L7.5 15H4z" fill="currentColor" stroke="none"/><path d="M16 10l4 4M20 10l-4 4"/>';
}
function paint() {
var p = (bar.value / 1000) * 100;
bar.style.setProperty("background", "linear-gradient(90deg,#8d1c24 " + p + "%,rgba(243,236,232,.32) " + p + "%)", "important");
}
function fit() { if (window.setHeight) setHeight(); }
v.loop = true;
v.muted = true;
soundIco(false);
paint();
v.addEventListener("loadedmetadata", fit);
setTimeout(fit, 300);
function toggle() {
if (v.paused) { v.play(); play.innerHTML = pauseIco; }
else { v.pause(); play.innerHTML = playIco; }
}
play.onclick = toggle;
v.onclick = toggle;
mute.onclick = function () {
v.muted = !v.muted;
soundIco(!v.muted);
};
v.addEventListener("timeupdate", function () {
if (!drag && v.duration) {
bar.value = Math.round(v.currentTime / v.duration * 1000);
paint();
}
});
bar.addEventListener("pointerdown", function () { drag = true; });
bar.addEventListener("pointerup", function () { drag = false; });
bar.addEventListener("input", function () {
if (v.duration) v.currentTime = bar.value / 1000 * v.duration;
paint();
});
})();
</script>
[/html]
[hideprofile]
