Встраивание на Tilda

Kinescope легко интегрируется в сайты на платформе Tilda. Она поддерживает три способа встраивания видеоплеера, каждый из которых подходит для различных целей: размещение видео на странице через HTML-код, Zero Block или всплывающее окно. Дополнительно можно защитить контент динамическими и статическими водяными знаками.

Кому подходит эта статья

• Владельцам сайтов на Tilda — нужно встроить защищённые видео на страницы
• Создателям онлайн-курсов — требуется добавить видео в лекции в личном кабинете Tilda
• Маркетологам — нужно разместить видео во всплывающих окнах для привлечения внимания
• Владельцам контента — требуется защитить видео водяными знаками от несанкционированного копирования

О вставке видео в стандартные блоки Tilda читайте в этой статье.

Встраивание через блок T123 и HTML-код

1. На странице сайта в Tilda добавьте блок T123 HTML-код. Быстрее всего его найти в поиске.

2. В панели управления Kinescope скопируйте код вставки нужного видео:

   1. Дважды кликните по названию видео;
   2. Нажмите «Встроить» и выберите адаптивный код.

3. Вставьте этот код в блок T123 и настройте ширину и отступы. Например: 10 колонок ширины и 1 колонка отступа — ориентируйтесь на вёрстку сайта.

4. Сохраните изменения и опубликуйте страницу.

Почему рекомендуется использовать адаптивный код для встраивания? Он автоматически подстраивается под экран и отлично работает на мобильных устройствах. Если нужно, можно изменить CSS код, но лучше не удалять параметры iframe, чтобы плеер работал корректно. Подробнее читайте в документации iframe.

Встраивание в Zero Block

Код добавляется в HTML-элемент Zero Block по тому же алгоритму, который описан выше.

Встраивание плеера во всплывающее окно

Pop-up блок (T868) позволяет запускать плеер во всплывающем окне. Используйте готовый код ниже:

1. Укажите ссылку на видео и дополнительные параметры (например, ?autoplay=1 для автостарта видео с указанной секунды) в параметре embedLink.
2. После добавления этого кода в блок Т868 на странице, ссылку формата #popup:embedcode можно привязать к любым элементам, например, кнопкам, чтобы вызывать всплывающее окно при клике на них.

<script>

    document.addEventListener('DOMContentLoaded', function() {
    //ссылка на ролик
    var embedLink = 'https://kinescope.io/pcFNnQGsD59CMKte2SQQaz?autoplay=1';
    //указывается id попапа из настроек тильды
    var popupId = '#popup:embedcode';
    // тип попапа
    var popupType = 't868';
    // соотношение сторон видео 9/16 - вертикальное, 16/9 горизонатльное
    var aspectRatio = 16/9;

    var popupParent = document.querySelector('div[data-tooltip-hook="' + popupId + '"]');
    var popupContainer = popupParent.querySelector('.' + popupType + '__code-wrap');
    popupParent.addEventListener('click', function(e) {
    if (e.target === popupParent) clearIframe()
})
    popupContainer.style.backgroundColor = 'transparent';
    var buttons = document.querySelectorAll('a[href="' + popupId + '"]');
    Array.prototype.forEach.call(buttons, function(button) {
    button.addEventListener('click', function(event) {
    event.preventDefault();
    addIframe();
})
});
    var popupClose = null
    document.addEventListener('keydown', function(e) {
    if (e.keyCode === 27) clearIframe()
})
    function addIframe() {
    var iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.src = embedLink;
    iframe.frameBorder = '0';
    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allow',"autoplay; picture-in-picture; encrypted-media;")
    popupContainer.insertAdjacentElement('beforeend', iframe)
    if (popupClose === null) {
    popupClose = popupParent.querySelector('.t-popup__close')
    popupClose.addEventListener('click', function() {
    clearIframe();
})
}
    setTimeout(function() {
    setHeight()
}, 100)
}

    function clearIframe() {
    popupContainer.querySelector('iframe').remove()
}

    function setHeight() {
           var maxW=80;
    var videoCarrier = popupContainer;
    var carrierParent = videoCarrier ? videoCarrier.parentNode : null;
    var videoWidth =  maxW * aspectRatio
    var videoHeight = maxW * (1/aspectRatio);
    if (videoCarrier) {
        videoCarrier.style.width = videoWidth + 'vh';
        videoCarrier.style.height = videoHeight + 'vw';
        videoCarrier.style.maxWidth =  maxW+'vw';
        videoCarrier.style.maxHeight = maxW + 'vh';
    }

    if (carrierParent) {
        carrierParent.style.width = videoWidth + 'vh';
        carrierParent.style.height = videoHeight + 'vw';
        carrierParent.style.maxWidth =  maxW+'vw';
        carrierParent.style.maxHeight = maxW + 'vh';
    }
    }
})
</script>

Встраивание в личном кабинете курсов

Каждая лекция в курсе может быть представлена в формате видео или вебинара. Рассмотрим особенности настройки каждого типа лекций.

Лекция-видео

1. Выберите Kinescope в параметре «Видео: id или ссылка». Tilda по умолчанию рекомендует Kinescope для защиты видео от скачивания.

2. Укажите прямую ссылку, ID или UUID для видео, размещённого в Kinescope. Настройки внешнего вида плеера и виды защиты доступны в интерфейсе Kinescope.
3. Для сохранения настроек лекции укажите название и проверьте отображение видео в режиме предпросмотра.

Лекция-вебинар

1. В параметре «Платформа вебинара» выберите «Ссылка на вебинар» или «Embed-код» — Kinescope по умолчанию поддерживает оба варианта встраивания.

2. Добавьте URL вебинара или HTML-код вебинара, в зависимости от выбранного вида платформы вебинара.

   По ссылке пользователь курса перейдет в новое окно для просмотра, а Embed-код (код вставки) поместит вебинар прямо в интерфейс курса.

   Настройки запуска, чата, рестриминга, внешнего вида плеера и виды защиты доступны в интерфейсе Kinescope.

3. Для сохранения настроек лекции укажите название и проверьте отображение вебинара в режиме предпросмотра.

Прямые ссылки на MP4 — блок CR32N

Чтобы получить прямую ссылку на видео в формате MP4 в нужном качестве, добавьте его в формате /360p, /480p, /720p или /1080p в конце URL-адреса.

Например: https://kinescope.io/200744487/720p

Динамические водяные знаки

Плеер Kinescope поддерживает отображение почты авторизованного пользователя сайта Tilda (значение tilda_ma.profile.login) в виде полупрозрачного водяного знака, который появляется на экране случайным образом. Этот функционал защищает контент от несанкционированного распространения.

Пользователь должен быть авторизован и иметь доступ к странице, чтобы водяной знак отобразился. Добавить пользователей, настроить доступ к страницам и разграничить права можно в Личном кабинете Tilda.

Для встраивания плеера с динамическим водяным знаком используйте готовый скрипт:

<div id="kinescope-player"></div>

<script>
    window.addEventListener('DOMContentLoaded', function (){
       var div = document.createElement("div");
       var watermark = '';
       if(!tilda_ma.profile && typeof tma__getProfileObjFromLS === 'function' ){
           tma__getProfileObjFromLS();
       }
       if(tilda_ma?.profile?.login){
           watermark = 'watermark='+tilda_ma.profile.login;
       }
       div.innerHTML = '<div style="position: relative; padding-top: 56.25%; width: 100%"><iframe src="https://kinescope.io/embed/200968117?'+watermark+'" allow="autoplay; fullscreen; picture-in-picture; encrypted-media;" frameborder="0" allowfullscreen style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></iframe></div>';
       document.getElementById('kinescope-player').replaceWith(div);
    })
</script>

Или посмотрите видео, в котором показано, как добавить видео в лекцию в конструкторе онлайн-курсов Tilda, включить и настроить динамические водяные знаки с почтой пользователя.

Статические водяные знаки

Статические водяные знаки нужны, чтобы указать на авторские права или промаркировать контент. Встройте готовый код ниже в блок T123 и укажите текст для водяного знака после параметра ?watermark=:

<iframe
  src="https://kinescope.io/embed/201703311?watermark=YourValue"
  width="640"
  height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
></iframe>

Что дальше?

Что дальше?

После настройки встраивания на Tilda рекомендуем:

1. Встраивание — общие принципы встраивания видео
2. Настроить защиту контента — включите DRM-шифрование и водяные знаки для защиты видео
3. Ограничить доступ по доменам — разрешите просмотр видео только на вашем сайте Tilda
4. Кастомизировать плеер — настройте внешний вид плеера под ваш бренд

Остались вопросы? Напишите в чат поддержки — специалисты помогут!