URL скопирован в буфер обмена!
Конструктор видео для Tilda
С помощью этой модификации можно добавить в Zero Block видео mp4 со своими элементами управления. Дополнительно можно включить зацикливание, автоплей, старт при наведении и многое другое.
Модификация обновлена. Добавлена возможность выбрать качество видео (работает только для видео которые загрузили в kinescope).
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Ссылка на видео
Класс для видео
Качество(см. инструкцию)
Класс для превьюшки
Воспроизводить видео сразу?
Зацикливание видео
Звук в видео
Настройки интерфейса видео
Спрятать стандартный интерфейс?
Класс для кнопки "Play
Класс для кнопки Stop
Класс для кнопки Mute
Класс для кнопки Unmute
Воспроизводить видео при наведении курсора?
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD025--><script>
$(document).ready(function () {
let TiCode_src_video = '/1080p';
let TiCode_player = '.tc-video';
let TiCode_preview = '.tc-preview';
let TiCode_play = '.tc-play';
let TiCode_stop = '.tc-stop';
let TiCode_mute = '.tc-mute';
let TiCode_loud = '.tc-loud';
let TiCode_play_by_hover = false;
let TiCode_controls = true;
let TiCode_autoplay = false;
let TiCode_muted = false;
let TiCode_loop = false;
let TiCode_mime = 'video/mp4';
let TiCode_containerWidth;
let TiCode_containerHeight;
let TiCode_$player, TiCode_$source;
let TiCode_interact = false;
function Ti_calculateContainerSize() {
TiCode_containerWidth = $(TiCode_player).width();
TiCode_containerHeight = $(TiCode_player).height();
}
Ti_calculateContainerSize();
$(window).resize(function () {
Ti_calculateContainerSize();
});
Ti_init();
$('body').click(function () {
TiCode_interact = true;
});
$(TiCode_player)
.mouseenter(function () {
if (!TiCode_play_by_hover) return false;
if (!TiCode_interact) TiCode_$player.prop('muted', true);
TiCode_$player.trigger('play');
$(TiCode_preview).hide();
})
.mouseleave(function () {
if (!TiCode_play_by_hover) return false;
TiCode_$player.trigger('pause');
});
$(TiCode_preview).hover(function () {
if (!TiCode_play_by_hover) return false;
TiCode_$player.prop('muted', true);
TiCode_$player.trigger('play');
$(TiCode_preview).hide();
});
$(TiCode_preview).click(function () {
TiCode_$player.trigger('play');
$(TiCode_preview).hide();
});
$(TiCode_play).click(function () {
TiCode_$player.trigger('play');
$(TiCode_preview).hide();
});
$(TiCode_stop).click(function () {
TiCode_$player.trigger('pause');
});
$(TiCode_mute).click(function () {
TiCode_$player.prop('muted', true);
});
$(TiCode_loud).click(function () {
TiCode_$player.prop('muted', false);
});
TiCode_$player.on('play', function () {
Ti_hide($(TiCode_play));
Ti_show($(TiCode_stop));
});
TiCode_$player.on('pause', function () {
Ti_hide($(TiCode_stop));
Ti_show($(TiCode_play));
});
TiCode_$player.on('volumechange', function () {
TiCode_interact = true;
if (TiCode_$player.prop('muted') || TiCode_$player.prop('volume') == 0) {
Ti_hide($(TiCode_mute));
Ti_show($(TiCode_loud));
}
if (!TiCode_$player.prop('muted') && TiCode_$player.prop('volume') > 0) {
Ti_hide($(TiCode_loud));
Ti_show($(TiCode_mute));
}
});
function Ti_init() {
$(document).click();
$(TiCode_player)
.find('.tn-atom')
.css({
overflow: 'hidden',
display: 'block',
width: '100%',
height: '100%',
});
TiCode_$player = $(TiCode_player)
.find('.tn-atom')
.append('<video playsinline></video>')
.find('video');
TiCode_$source = TiCode_$player.append('<source>').find('source');
TiCode_$source.attr('type', TiCode_mime);
TiCode_$source.attr('src', TiCode_src_video);
if (TiCode_muted) TiCode_$player.prop('muted', true);
if (TiCode_controls) TiCode_$player.attr('controls', true);
if (TiCode_loop) TiCode_$player.attr('loop', true);
if (TiCode_autoplay) {
TiCode_$player.attr('autoplay', true);
$(TiCode_preview).hide();
}
TiCode_$player.css({
display: 'block',
width: TiCode_containerWidth + 'px',
height: TiCode_containerHeight + 'px',
objectFit: 'cover',
});
$(TiCode_play).css({ cursor: 'pointer' });
$(TiCode_stop).css({ cursor: 'pointer' });
$(TiCode_mute).css({ cursor: 'pointer' });
$(TiCode_loud).css({ cursor: 'pointer' });
Ti_hide($(TiCode_stop));
Ti_hide($(TiCode_loud));
}
function Ti_hide(element) {
element.find('.tn-atom').css({ opacity: 0 });
element.hide();
}
function Ti_show(element) {
element.find('.tn-atom').css({ opacity: 1 });
element.show();
}
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем прозрачный шейп в Zero Block и назначаем ему класс tc-video
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Если нужно создать превью для видео, то создаем еще дин шейп. Загружаем туда картинку и назначаем класс tc-preview Шейп размещаем поверх видео и подгоняем размеры такие же как и шейпе с видео;
3. Загружаем видео в Kinescope, так как Тильда не разрешает хранить видео у себя. Если нет аккаунта Kinescope, то создаем по ссылке. Получаем прямую ссылку на видео. Для этого в кинескопе нажимаем на три точки и выбираем "копировать ссылку". Вставляем ссылку в генератор в поле "Ссылка на видео"
4. Если необходимо включать видео своей кнопкой, то создаем два элемента(это может быть картинка, кнопка, текст, шейп) и назначаем им классы: для кнопки Play класс из поля "класс для кнопки Play", для кнопки "Stop" из поля "класс для кнопки Stop". Важно!!! Если в качестве кнопок использовали шейп или картинку, то в настройках элемента параметр LAZZYLOAD ставив в положение off (иначе кнопки не подгрузит)
5. Если необходимо сделать свои кнопки для управления звуком, то делаем все тоже самое из пункта 4, но назначаем кнопкам классы из других полей.
6. При необходимости указываем дополнительные настройки в генераторе и копируем код
Зацикливание видео - при включенной настройке будет повторять видео.
Звук в видео - включаем или отключаем звук в видео. Включённый звук не работает если указали автоплей(современные браузеры блокируют автозапуск со звуком.
Спрятать стандартный интерфейс - при включенной настройке скрывает стандартные элементы управления видео(кнопки громкости, полоску таймлайна, кнопку Play и т. д.)
Воспроизводить видео при наведении курсора - при включенной настройке будет проигрывать видео при наведении. Не работает на мобилках так там отсутствуют курсоры
Качество видео - эта настройка работает только если грузили видео на Кинескоп. Если грузили на другой хостинг, выберите опцию "другое". Кинескоп сжимает видео в три формата: 1080, 720 и 480. Если выставили формат 1080, но видео не воспроизводится, это означает, что исходное видео было низкого качества, и Кинескоп не смог создать формат 1080. В таком случае выберите 720 или 480.
7. Готовый код вставляем в HTML блок Т123
Примечание! У видео можно скруглить углы. Для этого достаточно скруглить углы шейпа, к которому вы привязали видео.
Если вывели видео со своими кнопками управления на первый экран сайта, то при загрузке страницы могли заменить мигание кнопки "стоп". Чтобы это избежать установите кнопке прозрачность на 1%.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Если нужно создать превью для видео, то создаем еще дин шейп. Загружаем туда картинку и назначаем класс tc-preview Шейп размещаем поверх видео и подгоняем размеры такие же как и шейпе с видео;
3. Загружаем видео в Kinescope, так как Тильда не разрешает хранить видео у себя. Если нет аккаунта Kinescope, то создаем по ссылке. Получаем прямую ссылку на видео. Для этого в кинескопе нажимаем на три точки и выбираем "копировать ссылку". Вставляем ссылку в генератор в поле "Ссылка на видео"
4. Если необходимо включать видео своей кнопкой, то создаем два элемента(это может быть картинка, кнопка, текст, шейп) и назначаем им классы: для кнопки Play класс из поля "класс для кнопки Play", для кнопки "Stop" из поля "класс для кнопки Stop". Важно!!! Если в качестве кнопок использовали шейп или картинку, то в настройках элемента параметр LAZZYLOAD ставив в положение off (иначе кнопки не подгрузит)
5. Если необходимо сделать свои кнопки для управления звуком, то делаем все тоже самое из пункта 4, но назначаем кнопкам классы из других полей.
6. При необходимости указываем дополнительные настройки в генераторе и копируем код
Зацикливание видео - при включенной настройке будет повторять видео.
Звук в видео - включаем или отключаем звук в видео. Включённый звук не работает если указали автоплей(современные браузеры блокируют автозапуск со звуком.
Спрятать стандартный интерфейс - при включенной настройке скрывает стандартные элементы управления видео(кнопки громкости, полоску таймлайна, кнопку Play и т. д.)
Воспроизводить видео при наведении курсора - при включенной настройке будет проигрывать видео при наведении. Не работает на мобилках так там отсутствуют курсоры
Качество видео - эта настройка работает только если грузили видео на Кинескоп. Если грузили на другой хостинг, выберите опцию "другое". Кинескоп сжимает видео в три формата: 1080, 720 и 480. Если выставили формат 1080, но видео не воспроизводится, это означает, что исходное видео было низкого качества, и Кинескоп не смог создать формат 1080. В таком случае выберите 720 или 480.
7. Готовый код вставляем в HTML блок Т123
Примечание! У видео можно скруглить углы. Для этого достаточно скруглить углы шейпа, к которому вы привязали видео.
Если вывели видео со своими кнопками управления на первый экран сайта, то при загрузке страницы могли заменить мигание кнопки "стоп". Чтобы это избежать установите кнопке прозрачность на 1%.
1
Это видео с превью и своими элементами управления
