URL скопирован в буфер обмена!
Как сделать проигрывание видео при наведении курсора на Tilda?
С помощью этой модификации можно проигрывать и останавливать видео MP4 в Zero Block при наведении курсора. Дополнительно можно отключить звук и сохранять состояние видео, чтобы при повторном наведении воспроизведение продолжалось с того места, где оно было остановлено.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс видео
Звук
Состояние видео
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD101-->
<script>
window.onload = function () {
let TCDtrackingvideo = false;
let TCDcash = false;
let TCDpause = true;
function Ticodevieotracking(video) {
if (!TCDpause) {
TCDtrackingvideo = true;
video.muted = false;
}
}
function TiCodestartguidance() {
const videos = document.querySelectorAll(".ti-video-hover video");
videos.forEach(video => {
if (video.dataset.tiVidInit) return;
video.dataset.tiVidInit = "true";
const container = video.closest(".ti-video-hover");
if (!container) return;
if (window.innerWidth <= 960) {
video.pause();
return;
}
video.muted = TCDpause;
let TCDCursorOver = false;
container.addEventListener("mouseenter", () => {
TCDCursorOver = true;
video.muted = !TCDtrackingvideo;
video.play();
});
container.addEventListener("mouseleave", () => {
TCDCursorOver = false;
video.pause();
if (!TCDcash) {
video.currentTime = 0;
}
});
video.addEventListener("click", (event) => {
Ticodevieotracking(video);
event.preventDefault();
event.stopPropagation();
video.play();
});
video.addEventListener("pointerup", (event) => {
event.preventDefault();
event.stopPropagation();
video.play();
});
video.addEventListener("keydown", (event) => {
if (event.code === "Space") {
event.preventDefault();
}
});
});
}
const tcobserver = new MutationObserver(() => {
TiCodestartguidance();
});
tcobserver.observe(document.body, { childList: true, subtree: true });
TiCodestartguidance();
};
</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 видео и присваиваем класс ti-video-hover (Если видео несколько, то всем присваиваем один класс)
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В настройках видео выбираем формат MP4 и указываем ссылку на видео. Лучше всего грузить видео на Kinescope Чтобы ссылка была в формате MP4, копируем ссылку и добаляем в конце /480p, /720p или /1080p, в зависимости от того, какое качество нужно.
3. При необходимости указываем дополнительные настройки в генераторе:
Звук - Если звук выключен, видео будет проигрываться без звука. Важно: если в настройках видео не скрыт интерфейс, пользователь сможет включить звук через него.
Если звук включен, видео начнёт воспроизводиться с выключенным звуком при наведении, до момента пока пользователь не кликнет в области видео. (Это связано с тем, что браузеры блокируют автозапуск видео со звуком);
Состояние видео - если опция включена, видео продолжит воспроизведение с того места, где оно было остановлено при повторном наведении. Если выключена — при каждом новом наведении видео будет начинать воспроизводиться с начала.
3. Копируем готовый код и вставляем в HTML блок Т123
Примечание: Скрипт не работает с обложками видео, установленными через Тильду. Рекомендуется либо удалить их, либо настроить в Kinescope.
Модификация работает только на ПК, так как на мобильных устройствах отсутствует эффект наведения (hover).
В некоторых мобильных браузерах первый кадр видео может не загружаться, и вместо него будет отображаться фон сайта. Однако после клика видео запустится. Если столкнулись с этой проблемой, то для ее решения можно создать шейп, загрузить в него скрин первого кадра видео или обложку и разместить его под видео.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В настройках видео выбираем формат MP4 и указываем ссылку на видео. Лучше всего грузить видео на Kinescope Чтобы ссылка была в формате MP4, копируем ссылку и добаляем в конце /480p, /720p или /1080p, в зависимости от того, какое качество нужно.
3. При необходимости указываем дополнительные настройки в генераторе:
Звук - Если звук выключен, видео будет проигрываться без звука. Важно: если в настройках видео не скрыт интерфейс, пользователь сможет включить звук через него.
Если звук включен, видео начнёт воспроизводиться с выключенным звуком при наведении, до момента пока пользователь не кликнет в области видео. (Это связано с тем, что браузеры блокируют автозапуск видео со звуком);
Состояние видео - если опция включена, видео продолжит воспроизведение с того места, где оно было остановлено при повторном наведении. Если выключена — при каждом новом наведении видео будет начинать воспроизводиться с начала.
3. Копируем готовый код и вставляем в HTML блок Т123
Примечание: Скрипт не работает с обложками видео, установленными через Тильду. Рекомендуется либо удалить их, либо настроить в Kinescope.
Модификация работает только на ПК, так как на мобильных устройствах отсутствует эффект наведения (hover).
В некоторых мобильных браузерах первый кадр видео может не загружаться, и вместо него будет отображаться фон сайта. Однако после клика видео запустится. Если столкнулись с этой проблемой, то для ее решения можно создать шейп, загрузить в него скрин первого кадра видео или обложку и разместить его под видео.
