URL скопирован в буфер обмена!
Как добавить тайм-коды и кнопки управления для видео на Tilda
Эта модификация позволяет создавать кнопки, при нажатии на которые видео будет перематываться на заданный момент. Дополнительно можно добавить кастомные кнопки для управления звуком, паузой и воспроизведением видео в плеере Tilda.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс видео
Класс кнопок с тайм-кодом
Класс кнопки Play
Класс кнопки Stop
Класс кнопки Mute
Класс кнопки Unmute
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD100--><script>
window.addEventListener("load", function () {
const TCDvideotime = document.querySelectorAll(".tcd-timecode a");
const TCDPlaybtn = document.querySelector(".tcd-play .tn-atom");
const TCDStopbtn = document.querySelector(".tcd-stop .tn-atom");
const TCDmutebtn = document.querySelector(".tcd-mute .tn-atom");
const TCDunmutebtn = document.querySelector(".tcd-unmute .tn-atom");
let ticodechekvideo = setInterval(() => {
const video = document.querySelector(".tcd-video video");
if (video) {
clearInterval(ticodechekvideo);
TCDvideotime.forEach(button => {
button.addEventListener("click", function (event) {
event.preventDefault();
const tctimer = parseInt(this.getAttribute("href").replace("#", ""), 10);
if (!isNaN(tctimer)) {
if (tctimer <= video.duration) {
video.currentTime = tctimer;
video.play();
ticodeplaycontrol(video);
} else {
video.currentTime = video.duration;
video.pause();
ticodeplaycontrol(video);
}
}
});
});
if (TCDPlaybtn) {
TCDPlaybtn.addEventListener("click", function () {
video.play();
ticodeplaycontrol(video);
});
}
if (TCDStopbtn) {
TCDStopbtn.addEventListener("click", function () {
video.pause();
ticodeplaycontrol(video);
});
}
if (TCDmutebtn) {
TCDmutebtn.addEventListener("click", function () {
video.muted = true;
ticodesoundcontrol(video);
});
}
if (TCDunmutebtn) {
TCDunmutebtn.addEventListener("click", function () {
video.muted = false;
ticodesoundcontrol(video);
});
}
video.addEventListener("ended", function() {
ticodeplaycontrol(video);
});
video.addEventListener("click", function() {
if (video.paused) {
video.play();
} else {
video.pause();
}
ticodeplaycontrol(video);
});
ticodeplaycontrol(video);
ticodesoundcontrol(video);
}
}, 1000);
function ticodeplaycontrol(video) {
if (video.paused || video.ended) {
TCDPlaybtn.style.opacity = "1";
TCDPlaybtn.style.pointerEvents = "auto";
TCDPlaybtn.style.cursor = "pointer";
TCDStopbtn.style.opacity = "0";
TCDStopbtn.style.pointerEvents = "none";
TCDStopbtn.style.cursor = "default";
} else {
TCDPlaybtn.style.opacity = "0";
TCDPlaybtn.style.pointerEvents = "none";
TCDPlaybtn.style.cursor = "default";
TCDStopbtn.style.opacity = "1";
TCDStopbtn.style.pointerEvents = "auto";
TCDStopbtn.style.cursor = "pointer";
}
}
function ticodesoundcontrol(video) {
if (video.muted) {
TCDmutebtn.style.opacity = "0";
TCDmutebtn.style.pointerEvents = "none";
TCDmutebtn.style.cursor = "default";
TCDunmutebtn.style.opacity = "1";
TCDunmutebtn.style.pointerEvents = "auto";
TCDunmutebtn.style.cursor = "pointer";
} else {
TCDmutebtn.style.opacity = "1";
TCDmutebtn.style.pointerEvents = "auto";
TCDmutebtn.style.cursor = "pointer";
TCDunmutebtn.style.opacity = "0";
TCDunmutebtn.style.pointerEvents = "none";
TCDunmutebtn.style.cursor = "default";
}
}
});
</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 видеоплеер и присваиваем ему класс tcd-video
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В настройках плеера выбираем тип MP4 и вставляем ссылку на видео. Видео лучше загрузить на Kinescope или свой хостинг. Если загрузили видео на кинескоп, то копируем ссылку и вставляем в плеер, но в конце ссылки дописываем /480p, /720p или /1080p в зависимости от качества которое нужно.
Важно! Kinescope автоматически создает три формата: 480p, 720p, 1080p.
Но если исходное видео, например, 720p, то 1080p не будет доступно. В таком случае в ссылке указываем /720p, иначе видео не отобразится.
3. Создаем элементы для управления видео. Для этого добавляем кнопки, текст или изображения и присваиваем классы:
tcd-play - кнопка для запуска видео;
tcd-stop - кнопка для паузы;
tcd-mute - кнопка отключения звука;
tcd-unmute - кнопка включения звука;
Не забываем в настройках видео скрыть стандартные элементы управления.
Для вывода кнопок с тайм кодами присваиваем элементу класс tcd-timecode, а в ссылке элемента указываем #10 , где 10 — это время в секундах. Например, чтобы перемотать на 1:40, указываем в ссылке #100
4. Копируем код и вставляем в HTML блок Т123. Блок с кодом размещаем снизу под зеро блоком.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В настройках плеера выбираем тип MP4 и вставляем ссылку на видео. Видео лучше загрузить на Kinescope или свой хостинг. Если загрузили видео на кинескоп, то копируем ссылку и вставляем в плеер, но в конце ссылки дописываем /480p, /720p или /1080p в зависимости от качества которое нужно.
Важно! Kinescope автоматически создает три формата: 480p, 720p, 1080p.
Но если исходное видео, например, 720p, то 1080p не будет доступно. В таком случае в ссылке указываем /720p, иначе видео не отобразится.
3. Создаем элементы для управления видео. Для этого добавляем кнопки, текст или изображения и присваиваем классы:
tcd-play - кнопка для запуска видео;
tcd-stop - кнопка для паузы;
tcd-mute - кнопка отключения звука;
tcd-unmute - кнопка включения звука;
Не забываем в настройках видео скрыть стандартные элементы управления.
Для вывода кнопок с тайм кодами присваиваем элементу класс tcd-timecode, а в ссылке элемента указываем #10 , где 10 — это время в секундах. Например, чтобы перемотать на 1:40, указываем в ссылке #100
4. Копируем код и вставляем в HTML блок Т123. Блок с кодом размещаем снизу под зеро блоком.
