Поговорим о вещах, актуальных для каждого разработчика: как вставить видео из Youtube в приложении на Bubble. Сделать это можно тремя способами: встроить конкретный видеоклип родным кодом Youtube, сделать это при помощи ID и спарсить URL. Обсудим все три способа и их преимущества.
Bubble — один из мощнейших low-code конструкторов приложений. На нем можно сделать что угодно. О его фичах и особенностях мы рассказываем на двухдневном бесплатном марафоне по разработке без кода. Присоединяйтесь!
Самый простой способ: встроить одиночное видео
Тут ничего сложного нет: заходим на страницу с видео, нажимаем на «Поделиться» под ним, а потом кликаем «Встроить». Открывается такое вот окошко:
Копируем iframe-код из поля справа и вставляем его в HTML нашего приложения на Bubble. Все, воспроизведение настроено!
Кстати, iframe-код — гибкий инструмент. Дописывая его, можно менять параметры и качество видео без особых усилий. Например, если добавить в код «autoplay=1», воспроизведение начнется автоматически (с этим следует быть осторожнее — автопроигрывание нравится не всем пользователям). А если дописать «loop=1», то ролик будет начинаться заново сразу после окончания.
Больше параметров есть в официальной документации разработчиков Google.
Дописывать код нужно прямо в ссылку с видео. То есть, с автопроигрыванием и зацикливанием это будет выглядеть так:
<iframe width=”560” height=”315” src=”<https://www.youtube.com/embed/L4gvGFZ0O1A**?autoplay=1&loop=1**”> title=”YouTube video player” frameborder=”0” allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen></iframe>
Соответственно, в коде можно изменить и размеры видео с названием.
Способ посложнее: используем ID видео
ID нужно в ситуации, когда нам требуется встроить разные ролики в приложении на Bubble. Сначала поговорим, что такое ID и где его взять. Тут ничего сложного: идентификатор — это набор букв и цифр, которые идут после youtu.be в ссылке.
У Bubble есть простое приложение, которое самостоятельно возьмет ID видео и встроит его в код, чтобы зерокодеру не приходилось ничего писать. Вот ссылка на него. В поле под «Enter Youtube video link» нужно вставить только ID.
Самый сложный способ: парсим URL
Про первые два способа практически все разработчики знают и так. Зато третий подразумевает использование JavaScript-кода, пусть и в небольшом количестве.
Зачем парсить URL? Представим ситуацию: мы получили электронную таблицу с базой данных, а в ней — десятки ссылок на ролики, причем все в разных форматах. Некоторые выглядят как «https://youtu.be/L4gvGFZ0O1A», некоторые как «https://www.youtube.com/watch?v=L4gvGFZ0O1A», а некоторые вообще часть плейлиста в проигрывателе.
Или у нас есть приложение с формой, где мы просим у пользователей видео. Чаще всего требовать вводить ID бессмысленно — не все поймут, некоторые не обратят внимания, и мы получим кучу ссылок как в примерах выше.
Проще настроить парсинг, который будет автоматически извлекать из ссылок ID.
Для этого нужно установить плагин Toolbox, который позволяет писать JS-код в формате «Javascript to Bubble».
1. Прописываем параметры как на картинке ниже.
2. Включаем «Run JavaScript» и вставляем туда следующую функцию:
function getVideoIdFromYoutubeLink(link) {
const url = link.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
};
function createYoutubeLink(videoId) {
return '<https://www.youtube.com/embed/>' + videoId + '?loop=0&playlist=' + videoId + '&autoplay=1&rel=0&modestbranding=1&fs=1&autohide=1&iv_load_policy=3';
};
const videoId = getVideoIdFromYoutubeLink(“<<Input Youtube Link's value>>”);
if (!videoId) {
bubble_fn_MY_LINK(“”);
} else {
bubble_fn_MY_LINK(createYoutubeLink(videoId));
}
Код извлекает ID из всех типов видео. Заполучив данные, можно спокойно вставить их как показано во втором примере.
Готово! Эти три способа пригодятся любому зерокодеру для встраивания роликов и автоматизации работы с данными — и на вебе, и на iOS, и на Android.
