URL скопирован в буфер обмена!
Круговой прогресс-бар для видео в Zero Block на Tilda
С помощью этой модификации можно заменить стандартный прогресс-бар на круговой индикатор — как в Telegram. Обводка вокруг видео показывает текущий хронометраж и заполняется по мере просмотра. Можно настроить цвет и толщину, включать появление индикатора только после старта видео и перемотку кликом по кольцу.
Модификация работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
Класс для видео
Цвет обводки
Цвет прогресс-бара
Толщина обводки
Обводка при загрузке
Перемотка видео при клике
Цвет кнопки Play
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD137--><style>
.tcd-video-ring{position:absolute;inset:0;z-index:9;}
.tcd-video-ring svg{width:100%;height:100%;display:block;}
.tcd-video-ring .bg{fill:none;stroke:#f7d5ce;stroke-width:1;}
.tcd-video-ring .fg{fill:none;stroke:#f96855;stroke-width:1;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear;}
.tcd-video-ring.is-hidden{opacity:0;}
.tcd-video-ring .hit{fill:none;stroke:transparent;pointer-events:stroke;cursor:pointer;}
.tcd-play-visual{position:absolute;width:50px;height:50px;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;border-radius:999px;background:#f96855;display:flex;align-items:center;justify-content:center;opacity:1;pointer-events:none!important;}
.tcd-play-visual *{pointer-events:none!important;}
.tcd-play-visual svg{width:20px;height:20px;display:block;}
.tcd-play-visual.is-hidden{opacity:0;}
</style>
<script>
(function(){
var TCDstartplay=(function(){var tc=[0,1];return tc[(2-1)];})();
function TiCodeInit(){
document.querySelectorAll(".tc-ringbar video").forEach(function(tcVideo){
if(tcVideo.dataset.tcdRing==="1") return;
tcVideo.dataset.tcdRing="1";
var tcWrapHost=tcVideo.closest(".tn-atom__videoiframe")||tcVideo.parentElement;
if(!tcWrapHost) return;
var tcElem=tcWrapHost.closest(".tc-ringbar")||tcVideo.closest(".tc-ringbar")||tcWrapHost;
if(!tcElem) tcElem=tcWrapHost;
var tcCSE=getComputedStyle(tcElem);
if(tcCSE.position==="static") tcElem.style.position="relative";
var tcCS=getComputedStyle(tcWrapHost);
if(tcCS.position==="static") tcWrapHost.style.position="relative";
var tcWrap=document.createElement("div");
tcWrap.className="tcd-video-ring"+(TCDstartplay?(" is-hidden"):"");
tcWrap.innerHTML='<svg viewBox="0 0 100 100" preserveAspectRatio="none"><circle class="bg" cx="50" cy="50"></circle><circle class="fg" cx="50" cy="50"></circle><circle class="hit" cx="50" cy="50"></circle></svg>';
tcWrapHost.appendChild(tcWrap);
var tcFG=tcWrap.querySelector(".fg");
var tcBG=tcWrap.querySelector(".bg");
var tcHIT=tcWrap.querySelector(".hit");
function TiCodeSetupGeom(){
var tcdSW=parseFloat(getComputedStyle(tcFG).strokeWidth)||1;
var tcdR=50-(tcdSW/2);
tcBG.setAttribute("r",String(tcdR));
tcFG.setAttribute("r",String(tcdR));
tcHIT.setAttribute("r",String(tcdR));
var tcdC=2*Math.PI*tcdR;
tcFG.style.strokeDasharray=String(tcdC);
tcHIT.style.strokeWidth=String(Math.max(14,tcdSW*8));
return {R:tcdR,C:tcdC};
}
var tcdGeom=TiCodeSetupGeom();
function TiCodeGetP(){
var tcdD=tcVideo.duration;
var tcdT=tcVideo.currentTime;
var tcdP=0;
if(tcdD&&isFinite(tcdD)&&tcdD>0) tcdP=tcdT/tcdD;
if(tcdP<0) tcdP=0;
if(tcdP>1) tcdP=1;
return tcdP;
}
function TiCodePaint(tcdP){
tcFG.style.strokeDashoffset=String(tcdGeom.C*(1-tcdP));
}
function TiCodeUpdateOnce(){TiCodePaint(TiCodeGetP());}
function TiCodeShowRing(){if(TCDstartplay) tcWrap.classList.remove("is-hidden");}
function TiCodeMaybeHideRing(){if(!TCDstartplay) return; if(tcVideo.paused&&(!tcVideo.currentTime||tcVideo.currentTime<=0.02)) tcWrap.classList.add("is-hidden");}
var tcRAF=0;
function TiCodeTick(){tcRAF=0;TiCodeUpdateOnce();if(!tcVideo.paused&&!tcVideo.ended) tcRAF=requestAnimationFrame(TiCodeTick);}
function TiCodeStart(){TiCodeShowRing();if(!tcRAF) tcRAF=requestAnimationFrame(TiCodeTick);}
function TiCodeStop(){if(tcRAF){cancelAnimationFrame(tcRAF);tcRAF=0;}TiCodeUpdateOnce();TiCodeMaybeHideRing();}
["loadedmetadata","durationchange","seeked","timeupdate"].forEach(function(tiEv){tcVideo.addEventListener(tiEv,TiCodeUpdateOnce,{passive:true});});
tcVideo.addEventListener("play",TiCodeStart,{passive:true});
["pause","ended"].forEach(function(tiEv){tcVideo.addEventListener(tiEv,TiCodeStop,{passive:true});});
if(window.ResizeObserver){
var tcRO=new ResizeObserver(function(){tcdGeom=TiCodeSetupGeom();TiCodeUpdateOnce();});
tcRO.observe(tcWrapHost);
}
var TCDclickbtn=(function(){return +!!(0);})();
if(TCDclickbtn){
tcWrap.style.pointerEvents="none";
tcHIT.style.pointerEvents="stroke";
tcHIT.addEventListener("pointerdown",function(tcE){
var tcdD=tcVideo.duration;
if(!(tcdD&&isFinite(tcdD)&&tcdD>0)) return;
var tcdRect=tcWrap.getBoundingClientRect();
var tcdX=(tcE.clientX-tcdRect.left);
var tcdY=(tcE.clientY-tcdRect.top);
var tcdCX=tcdRect.width/2;
var tcdCY=tcdRect.height/2;
var tcdDX=tcdX-tcdCX;
var tcdDY=tcdY-tcdCY;
var tcdA=Math.atan2(tcdDY,tcdDX);
var tcdP=(tcdA+Math.PI/2)/(2*Math.PI);
if(tcdP<0) tcdP+=1;
if(tcdP>1) tcdP-=1;
try{tcVideo.currentTime=tcdP*tcdD;}catch(tcErr){}
TiCodeUpdateOnce();
},{passive:true});
} else {
tcWrap.style.pointerEvents="none";
}
var tcPlayV=tcElem.querySelector(".tcd-play-visual");
if(!tcPlayV){
tcPlayV=document.createElement("div");
tcPlayV.className="tcd-play-visual";
tcPlayV.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M9 7v10l9-5z"></path></svg>';
tcElem.appendChild(tcPlayV);
}
function TiCodeShowPlayV(){tcPlayV.classList.remove("is-hidden");}
function TiCodeHidePlayV(){tcPlayV.classList.add("is-hidden");}
function TiCodeSyncPlayV(){if(tcVideo.ended||tcVideo.paused) TiCodeShowPlayV(); else TiCodeHidePlayV();}
TiCodeUpdateOnce();
if(!tcVideo.paused&&!tcVideo.ended) TiCodeStart(); else TiCodeMaybeHideRing();
TiCodeSyncPlayV();
tcVideo.addEventListener("play",function(){TiCodeSyncPlayV();},{passive:true});
tcVideo.addEventListener("pause",function(){TiCodeSyncPlayV();},{passive:true});
tcVideo.addEventListener("ended",function(){TiCodeSyncPlayV();},{passive:true});
});
}
document.addEventListener("DOMContentLoaded",function(){TiCodeInit();setTimeout(TiCodeInit,400);setTimeout(TiCodeInit,1200);});
if(window.MutationObserver){
var tcMO=new MutationObserver(function(){TiCodeInit();});
tcMO.observe(document.documentElement,{childList:true,subtree:true});
}
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем в Zero Block видео и присваиваем ему класс tc-ringbar
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Настрой видео:
3. Указываем дополнительные настройки в генераторе:
Цвет обводки и Цвет прогресс-бара — указываем цвет цвета незаполненной обводки и заполняющейся части;
Толщина обводки — указываем толщину обводки;
Обводка при загрузке — если выключено, кольцо появится только после запуска видео;
Перемотка видео при клике — если включено, клик по обводке будет перематывать видео;
Цвет кнопки Play — указываем цвет для кнопки запуска видео.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с видео.
Примечание: если на странице несколько видео, отдельный код под каждое не нужен. Достаточно добавить класс
tc-ringbar всем нужным видео.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Настрой видео:
- Размер видео должен быть квадрат;
- Скругление углов ставим на 300px чтобы получился круг;
- тип видео MP4 (видео можно загрузить в Tilda, Kinescope, Dropbox или на свой сервер и указать прямую ссылку).
- В параметрах видео указываем Control — hide, чтобы скрыть стандартные элементы управления и Object fit — Cover, чтобы растянуть видео на весь круг без черных полей;
3. Указываем дополнительные настройки в генераторе:
Цвет обводки и Цвет прогресс-бара — указываем цвет цвета незаполненной обводки и заполняющейся части;
Толщина обводки — указываем толщину обводки;
Обводка при загрузке — если выключено, кольцо появится только после запуска видео;
Перемотка видео при клике — если включено, клик по обводке будет перематывать видео;
Цвет кнопки Play — указываем цвет для кнопки запуска видео.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с видео.
Примечание: если на странице несколько видео, отдельный код под каждое не нужен. Достаточно добавить класс
tc-ringbar всем нужным видео.
